Today i am going to tell you how to test password strength in password textbox field using Jquery. This concept will done by using simple javascript, This is one of the important concept in any forms because the password field is very important field using this password only clients they access their account so you can set this password securly, So you can set strong password with combination of letters and numbers and special characters.
Create javascript function keyup, The keyup event occurs when a keyboard key is released. The password strength message will show when key up. In javascript will write some of the condition and display the message based on those conditions. First is if the password strength is less then six characters the message is Too Short will display. Grater then six character without numbers and special character it shows weak password. If the number of characters seven and special char it shows good and then finally morethen seven char with numbers and special characters it shows strong password.You also validate the password field using password strength. So it gives the secure password to the user.
This concept is one of the userfriendly because user knows we are created password is secure or not when they fill the form itself. Below example shows to check the password strength with the help of javascript. It haves the live example and codes for your reference, I hope this post is really helpful.
Check Password strength using Jquery:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>How to check password strength using jQuery</title>
<!--jQuery Library-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body{
background-color:#fff;
font-size: 15px;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
a{
color:#0073BF;
text-decoration:none;
}
h2{ text-align:center; color:#fff;}
#container{
width:600px;
margin:50px auto;
background-color:#D1CECE;;
padding:30px;
color:#fff;
border: 1px solid #7F7F7F;
}
#password-strength label{
margin-right:5px;
}
#password-strength input {
padding:5px 7px;
border:1px solid #d5d9da;
box-shadow: 0 0 5px #e8e9eb inset;
width:250px;
font-size:1em;
outline:0;
margin-right:10px;
}
#password-strength{
margin-left:5px;
}
#password-strength .short{
color:#FF0000;
}
#password-strength .weak{
color:#E66C2C;
}
#password-strength .good{
color:#2D98F3;
}
#password-strength .strong{
color:#006400;
}
</style>
<script>
$(document).ready(function()
{
$('#pwd').keyup(function()
{
$('#strength_message').html(checkStrength($('#pwd').val()))
})
function checkStrength(password)
{
var strength = 0
if (password.length < 6) {
$('#strength_message').removeClass()
$('#strength_message').addClass('short')
return 'Too short'
}
if (password.length > 7) strength += 1
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
if (strength < 2 )
{
$('#strength_message').removeClass()
$('#strength_message').addClass('weak')
return 'Weak'
}
else if (strength == 2 )
{
$('#strength_message').removeClass()
$('#strength_message').addClass('good')
return 'Good'
}
else
{
$('#strength_message').removeClass()
$('#strength_message').addClass('strong')
return 'Strong'
}
}
});
</script>
</head>
<body>
<div id="container">
<h2>Password Strength Checking with jQuery</h2>
<div id="content">
<center><form id="password-strength">
<label>Password : </label>
<input name="pwd" id="pwd" type="password"/>
<span id="strength_message"></span>
</form><br/>
<a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a>
</center>
</div>
<br/>
</div>
</body>
</html>
0 Comments