Password strength checker is very important for your signup form. It let’s you know the intensity of your password, whether it is weak or strong. If it is weak, you need to modify and make it stronger.
In this example you will learn how to create a strength checker in jQuery with four stages of strength – “Too short, Weak, Good, Strong” init. That enables anyone to choose it with high authority and relevancy..
Remember, a strong password is unbreakable and untraceable.
Before starting with the codes, I want to tell you some basic conditions that calculates the password strength. They are:
- Length.
- Use of special Characters like, [@, $].
- Use of uppercase [A – Z] and lowercase [a – z] letters.
- Use of numbers [0 – 9].
For a strong password, you need to take care including special characters along with your regular words.
Below is our complete code that contains HTML,jQuery and CSS file.
HTML File – passwordscheck.html
<!DOCTYPE HTML>
<html>
<head>
<title>Password strength checker in jQuery</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><!-- jQuery Library-->
<link rel="stylesheet" href="css/passwordscheck.css" /><!-- Include Your CSS file here-->
<script src="js/passwordscheck.js"></script><!-- Include Your jQUery file here-->
</head>
<body>
<div id="container">
<div id="header">
<h2>Password Strength Checking with jQuery</h2>
<hr>
</div>
<div id="content">
<form id="register">
<label for="password"><b>Password : </b></label>
<input name="password" id="password" type="password" placeholder="Type Your Password here"/>
<span id="result"></span>
</form>
</div>
</div>
</body>
</html>
jQuery File – passwordscheck.js
$(document).ready(function() {
$('#password').keyup(function() {
$('#result').html(checkStrength($('#password').val()))
})
function checkStrength(password) {
var strength = 0
if (password.length < 6) {
$('#result').removeClass()
$('#result').addClass('short')
return 'Too short'
}
if (password.length > 7) strength += 1
// If password contains both lower and uppercase characters, increase strength value.
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
// If it has numbers and characters, increase strength value.
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
// If it has one special character, increase strength value.
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
// If it has two special characters, increase strength value.
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
// Calculated strength value, we can return messages
// If value is less than 2
if (strength < 2) {
$('#result').removeClass()
$('#result').addClass('weak')
return 'Weak'
} else if (strength == 2) {
$('#result').removeClass()
$('#result').addClass('good')
return 'Good'
} else {
$('#result').removeClass()
$('#result').addClass('strong')
return 'Strong'
}
}
});
CSS File – passwordscheck.css
body{
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
font-size: 15px;
line-height: 1.5;
}
#container {
width: 535px;
background: #ffffff;
padding: 20px;
margin: 90px auto;
border-radius: 5px;
height: 150px;
border: 2px solid gray;
}
#header {
text-align: center;
background-color: #FEFFED;
border-radius: 5px;
margin: -39px -20px 10px -20px;
}
h2{
padding-top: 10px;
}
#content {
margin-left: 57px;
margin-top: 40px;
}
#register label{
margin-right:5px;
}
#register input {
padding: 5px 14px;
border: 1px solid #d5d9da;
box-shadow: 0 0 9px #0E34F5 inset;
width: 272px;
font-size: 1em;
height: 25px;
}
#register .short{
font-weight:bold;
color:#FF0000;
font-size:larger;
}
#register .weak{
font-weight:bold;
color:orange;
font-size:larger;
}
#register .good{
font-weight:bold;
color:#2D98F3;
font-size:larger;
}
#register .strong{
font-weight:bold;
color: limegreen;
font-size:larger;
}
Conclusion
If you don’t want hackers to crack your password, give a strong one. And, if you want to know whether your password is strong or not, use password strength checker in your form.
So that, you yourself and the users who will register on your signup form will feel relaxed when they see a “strong” strength of their password.
Recommended blogs –
- jQuery Form Shake Effect on Invalid Entry
- Implementing jQuery Text Editor in Textarea
8 Replies to “jQuery Password Strength Checker”
Very much impressed with your work. It is really very helpful for me.
Thanks
Pleased with your response …!
Keep reading our posts.
Thanks.
great work, simple effective…..naked coding….
Thanks for your appreciation !
Keep reading our blog posts :
https://www.formget.com/blog/
thank you very much!! Your Work Helps Me A lot..You inspires me to become great man like you 🙂
this cod eis very useful….thank you very much
Nice tutorial try another tutorial on TalkersCode.com to create Password Strength Checker Using JavaScript,jQuery and CSS
http://talkerscode.com/webtricks/password-strength-checker-using-jquery-and-css.php
Best Demo…. thanks for this…