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.

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.

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 just need to test user password against these expressions, for that we will use jQuery .keyup() method. The keyup event gets triggered when the user releases a key on the keyboard, allowing our code to run as the user types the characters on the field.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(password1).on('keyup', function(e) {
    if(VryStrongPass.test(password1.val()))
    {
        passwordsInfo.removeClass().addClass('vrystrongpass').html("Very Strong! (Awesome, please don't forget your pass now!)");
    }  
    else if(StrongPass.test(password1.val()))
    {
        passwordsInfo.removeClass().addClass('strongpass').html("Strong! (Enter special chars to make even stronger");
    }  
    else if(MediumPass.test(password1.val()))
    {
        passwordsInfo.removeClass().addClass('goodpass').html("Good! (Enter uppercase letter to make strong)");
    }
    else if(WeakPass.test(password1.val()))
    {
        passwordsInfo.removeClass().addClass('stillweakpass').html("Still Weak! (Enter digits to make good password)");
    }
    else
    {
        passwordsInfo.removeClass().addClass('weakpass').html("Very Weak! (Must be 5 or more chars)");
    }
});

For the second password field, we just need to check whether its string matches with the first one and notify the user. Hence, again using the keyup() method we will achieve the same.

1
2
3
4
5
6
7
8
$(password2).on('keyup', function(e) {    
    if(password1.val() !== password2.val())
    {
        passwordsInfo.removeClass().addClass('weakpass').html("Passwords do not match!");  
    }else{
        passwordsInfo.removeClass().addClass('goodpass').html("Passwords match!"); 
    }  
});

Let’s put everything together, as you can see below I have converted above snippets into a working JavaScript function. We can just call the function to check password strength in a form and inform the user using password indicator element as shown below.

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">
$(document).ready(function() {
    var password1       = $('#password1'); //id of first password field
    var password2       = $('#password2'); //id of second password field
    var passwordsInfo   = $('#pass-info'); //id of indicator element
   
    passwordStrengthCheck(password1,password2,passwordsInfo); //call password check function
   
});

function passwordStrengthCheck(password1, password2, passwordsInfo)
{
    //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,}$/;
   
    $(password1).on('keyup', function(e) {
        if(VryStrongPass.test(password1.val()))
        {
            passwordsInfo.removeClass().addClass('vrystrongpass').html("Very Strong! (Awesome, please don't forget your pass now!)");
        }  
        else if(StrongPass.test(password1.val()))
        {
            passwordsInfo.removeClass().addClass('strongpass').html("Strong! (Enter special chars to make even stronger");
        }  
        else if(MediumPass.test(password1.val()))
        {
            passwordsInfo.removeClass().addClass('goodpass').html("Good! (Enter uppercase letter to make strong)");
        }
        else if(WeakPass.test(password1.val()))
        {
            passwordsInfo.removeClass().addClass('stillweakpass').html("Still Weak! (Enter digits to make good password)");
        }
        else
        {
            passwordsInfo.removeClass().addClass('weakpass').html("Very Weak! (Must be 5 or more chars)");
        }
    });
   
    $(password2).on('keyup', function(e) {
       
        if(password1.val() !== password2.val())
        {
            passwordsInfo.removeClass().addClass('weakpass').html("Passwords do not match!");  
        }else{
            passwordsInfo.removeClass().addClass('goodpass').html("Passwords match!"); 
        }
           
    });
}
</script>

Demo

Download

6 Comments Add Comment

  • 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.

     Reply
  • var VryStrongPass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{5,}$/;

    I recommend and use this!

     Reply
  • it should work as username strength to prevent usernames like jack

     Reply
  • 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

     Reply
    • 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

     Reply