jQuery Password Strength Checker

In this tutorial we are going to validate password  strength using jQuery. We have regex patterns for alphabets numbers, and special characters. Password text will be matched with this pattern. Then, its strength will be validated based on the type of characters it contains.

password-strength-checker

Live DemoDownload

Password Strength Checking Form

This form interface is used to enter our password to be checked for validating its strength.

<div name="frmCheckPassword" id="frmCheckPassword">
<label>Check Username:</label>
<input type="password" name="password" id="password" class="demoInputBox" onKeyUp="checkPasswordStrength();" /><div id="password-strength-status"></div>
</div>

jQuery Function to Check Password Strength

This function will be called on the key-up event of the password field. This function checks the length of the password text. If it is less than 6 characters, then it will be validated as weak-password. If not, the password will be matched with the regex patterns. If the password contains at least one alphabet, one number and one special character then it will be considered as strong-password.

function checkPasswordStrength() {
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
if($('#password').val().length<6) {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('weak-password');
$('#password-strength-status').html("Weak (should be atleast 6 characters.)");
} else {  	
if($('#password').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().match(special_characters)) {            
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('strong-password');
$('#password-strength-status').html("Strong");
} else {
$('#password-strength-status').removeClass();
$('#password-strength-status').addClass('medium-password');
$('#password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
}}}

Live DemoDownload

This jQuery code tutorial was published on October 13, 2014.

↑ Back to Top