How to Create a Password Strength Indicator With jQuery

If you are building a system that allows the users to login in, 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 simple JQuery snippet that will check the user password and let them know how secure it is.

The Form

First of all, we are going to start this tutorial by building the html form with a password input box and a confirm password box.

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

IMPORTANT: the div is on the form in between the input textboxes an the submit button, this is where we will show the message for the strength of the current password.

JQuery Password Strength

There are a couple of things that we need to check when we evaluate the password.

• Check that the password and the confirm password match each other.
• 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.

So, we will create the regular expression to check all of these states and show a message if the regular expression fails against any of these passwords.

First of all we have to check if the password and confirm password match, if they don't, 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");

Then we need to checkt 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.

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;      
});  
});

original source: http://www.paulund.co.uk/

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.