Create Password Strength Indicator With jQuery

With security being the biggest problem for most websites it's important to make websites as secure as possible. But after all the precautions a developer can do with their code most of the problems with a website is simply the user didn't have a strong password. If you a building a system that allows the user to enter in their own password then it is always a good idea to give them an indication of how safe their password is. In this tutorial we are going to create a small JQuery snippet that will check the user password and let them know how secure it is.

#The HTML Form

First we are going to start off this tutorial by building a simple form to change your password, this will include a password input box with a confirm password box. This is make sure that the user hasn't mistyped their password. Many people type in their password wrong because they have just mistyped a letter when creating the password.

<form action="" method="post">
    	<p><label for="passwordInput">Password: <input type="password" id="passwordInput" name="passwordInput"></label></p>
	<p><label for="confirmPasswordInput">Confirm Password: <input type="password" id="confirmPasswordInput" name="confirmPasswordInput"></label></p>
	<p><div class="" id="passwordStrength"></div></p>
	<p><input type="submit" value="Change Password" class="btn"></p>
</form>

Notice the div that is on the form in between the input textboxes an the submit button, this is where we will display the message for the strength of the current password. ## JQuery Password Strength

This is where we create our jQuery snippet to perform the task of checking the strength of the password. There are a couple of things that we need to check when we judge the password. - We need to check that the password and the confirm password match each other.

• We need to check that the password is at least 6 characters long.
• If the password is more than 6 characters with no capital letters or numbers then it is a weak password.
• If the password is more than 6 characters with a capital letter or numbers then it is a medium password.
• If the password is more than 6 characters with a capital letter, number and special character then it is a strong password.

We will need to create the regular expression to check all of these states and display a message if the regular expression fails against any of these passwords. First we need to start off by checking if the password and confirm password match, if they don't match then the user has made a mistake when entering the password, therefore there is no need to check the strength of the password if it is incorrect. Once these two password fields match then we can perform the checks on the strength of the password, which is done with the following regular expressions. ### Strong Password

// Must have capital letter, numbers and lowercase letters
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

#Medium Password

// Must have either capitals and lowercase letters or lowercase and numbers
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

#Weak Password

// Must be at least 6 characters long
var okRegex = new RegExp("(?=.{6,}).*", "g");

We then do a check against each of these patterns to see which one it passes, as the strong password has the most conditions we need to check this first, then medium pattern, then the weak pattern. Below is the full code snippet of checking the password strength.

$(document).ready(function() {
 
    $('#passwordInput, #confirmPasswordInput').on('keyup', function(e) {
 
        if($('#passwordInput').val() == '' && $('#confirmPasswordInput').val() == '')
        {
            $('#passwordStrength').removeClass().html('');
 
            return false;
        }
 
     if($('#passwordInput').val() != '' && $('#confirmPasswordInput').val() != '' && $('#passwordInput').val() != $('#confirmPasswordInput').val())
    	{
    		$('#passwordStrength').removeClass().addClass('alert alert-error').html('Passwords do not match!');
        	return false;
    	}
 
        // Must have capital letter, numbers and lowercase letters
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
 
        // Must have either capitals and lowercase letters or lowercase and numbers
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
 
        // Must be at least 6 characters long
        var okRegex = new RegExp("(?=.{6,}).*", "g");
 
        if (okRegex.test($(this).val()) === false) {
            // If ok regex doesn't match the password
        	$('#passwordStrength').removeClass().addClass('alert alert-error').html('Password must be 6 characters long.');
 
        } else if (strongRegex.test($(this).val())) {
            // If reg ex matches strong password
            $('#passwordStrength').removeClass().addClass('alert alert-success').html('Good Password!');
        } else if (mediumRegex.test($(this).val())) {
            // If medium password matches the reg ex
            $('#passwordStrength').removeClass().addClass('alert alert-info').html('Make your password stronger with more capital letters, more numbers and special characters!');
        } else {
            // If password is ok
            $('#passwordStrength').removeClass().addClass('alert alert-error').html('Weak Password, try using numbers and capital letters.');
        }
        
        return true;
    });
});