Password Strength Checker jQuery

Password Strength checker is very useful thing for websites that allow user registration and password resets. Because most users want to rush up the process, and usually don't give much attention to their password strength, which leads to poor security, and passwords that can be cracked easily. So keeping in that mind, lets create a password strength checker using jQuery, which advice users to make their password stronger. Password Strength Check

Mark Up

I have created a HTML form, which includes two password fields and an indicator element which tells user whether the password is strong enough or not. Just remember the id of these fields, because we need to specify them in jQuery part below.
HTML
  • 1
  • 2
  • 3
  • 4
  • 5
<form action="" method="post" id="passwordTest"> <div><input type="password" id="password1" /></div> <div><input type="password" id="password2" /></div> <div id="pass-info"></div> </form>

jQuery

I assume you have similar password fields as above in your registration form page, which is good thing because you just have to add a DIV element for the indicator, and we can skip CSS styling part here and move directly to jQuery. Here we are going to use regular expression to test the strength of the password. Please have a look at regular expression below. The first one is weak password only containing 5 characters or more, medium password consist of lower characters and at least one digit, strong password must have a lower case character, at least one digit and upper case character, and very strong password must contain one special character along with digits and upper case characters.
JS
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
//Must contain 5 characters or more var WeakPass = /(?=.{5,}).*/; //Must contain lower case letters and at least one digit. var MediumPass = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; //Must contain at least one upper case letter, one lower case letter and one digit. var StrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; //Must contain at least one upper case letter, one lower case letter and one digit. var VryStrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{5,}$/;
Now we have our regular expression ready, we can create a simple function that will test the strength of the password using the regex above. The function below will return two values in Object literals encapsulated data.
JQUERY
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
var pw_test = function(str){ var WeakPass = /(?=.{5,}).*/; //Must contain 5 characters or more var MediumPass = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; //Must contain lower case letters and at least one digit. var StrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; //Must contain at least one upper case letter, one lower case letter and one digit. var VryStrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{5,}$/; //Must contain at least one upper case letter, one lower case letter and one digit. if(VryStrongPass.test(str)){ return {strength : 'very_strong', text : 'Very Strong! (Awesome, please don\'t forget your pass now!)'}; }else if(StrongPass.test(str)){ return {strength :'strong', text :'Strong! (Enter special chars to make even stronger'}; }else if(MediumPass.test(str)){ return {strength :'medium', text : 'Good! (Enter uppercase letter to make strong)'}; }else if(WeakPass.test(str)){ return {strength : 'weak', text : 'Still Weak! (Enter digits to make good password)'}; }else{ return {strength : 'very_weak', text : 'Very Weak! (Must be 5 or more chars)'}; } };
For the second password field, we just need to check whether the password strings match in both password fields. Hence using the keyup() method we will achieve the same.
JQUERY
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
$(password2).on('keyup', function(e) { if(password1.val() !== password2.val()){ $(".indicator_element").removeClass().addClass('weak').html("Passwords do not match!"); }else{ $(".indicator_element").removeClass().addClass('medium').html("Passwords match!"); } });
Let's put our snippets together to create a working example. We just need to call the pw_test function we had created above into the keyup() method. When user types the password we just change the indicator CSS by removing and adding the appropriate CSS class.
JQUERY
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
<script type="text/javascript"> var password1 = $('#password1'); //id of first password field var password2 = $('#password2'); //id of second password field var strength_indicator = $('#strength-indicator'); //id of indicator element //check password strength when user types in $(password1).on('keyup', function(e){ var pwd_strength = pw_test(password1.val()); switch(pwd_strength.strength){ case 'very_weak': strength_indicator.removeClass().addClass('very_weak').html(pwd_strength.text); break; case 'weak': strength_indicator.removeClass().addClass('weak').html(pwd_strength.text); break; case 'medium': strength_indicator.removeClass().addClass('medium').html(pwd_strength.text); break; case 'strong': strength_indicator.removeClass().addClass('strong').html(pwd_strength.text); break; case 'very_strong': strength_indicator.removeClass().addClass('very_strong').html(pwd_strength.text); break; } }); //whether password matches in second password input $(password2).on('keyup', function(e) { if(password1.val() !== password2.val()){ strength_indicator.removeClass().addClass('weak').html("Passwords do not match!"); }else{ strength_indicator.removeClass().addClass('medium').html("Passwords match!"); } }); //function to test password strength var pw_test = function(str){ var WeakPass = /(?=.{5,}).*/; //Must contain 5 characters or more var MediumPass = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; //Must contain lower case letters and at least one digit. var StrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; //Must contain at least one upper case letter, one lower case letter and one digit. var VryStrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{5,}$/; //Must contain at least one upper case letter, one lower case letter and one digit. if(VryStrongPass.test(str)){ return {strength : 'very_strong', text : 'Very Strong! (Awesome, please don\'t forget your pass now!)'}; }else if(StrongPass.test(str)){ return {strength :'strong', text :'Strong! (Enter special chars to make even stronger'}; }else if(MediumPass.test(str)){ return {strength :'medium', text : 'Good! (Enter uppercase letter to make strong)'}; }else if(WeakPass.test(str)){ return {strength : 'weak', text : 'Still Weak! (Enter digits to make good password)'}; }else{ return {strength : 'very_weak', text : 'Very Weak! (Must be 5 or more chars)'}; } }; </script>

Demo

Download
  • I need to enforce the password length to be more than 15. Is that logically correct to enforce my Website visitors to do so. or is it just minimum 3 characters.
  • How can I implement "password strength" + "ajax username availability" codes together ? After I insist proper strength password, I want it to check if username is taken, only after that I want user to submit. Both are codes developed by you, need it to work on one page
    • to describe more: (in effect, it should work as username strength to prevent usernames like jack, admin, rose, bill, kate)
  • Thank you very much for this topic I have a simple question If you put this code in a separate page How do I add it to another page think s
New question is currently disabled!