Create a Password Strength checker in jQuery

In this tutorial I will show how you can create password strength checker in jQuery for your website. For this you need to have a jQuery plugin pwdMeter. In this example you will see five stages of password strength very weak, weak, medium, strong and very strong all calculated on your passwords characters and its length.

To make a very strong password you have to add minimum 13 digit contain numbers, latter, signs and capital latter then it will be a good and secure password.

Include pwdMeter jquery:

<script type="text/javascript" src="js/jquery.pwdMeter.js"></script>

jQuery script to call plugin:

<script type="text/javascript">
	$(document).ready(function(){
	    $("#password").pwdMeter();
	});
</script>

HTML Code:

<input size="30" style="height:30px;border:1px solid #ccc;" type="password" id="password" />&nbsp;
<span id="pwdMeter" class="neutral"></span>

It will show you strength in empty span. So lets have some styling css for this.

.veryweak{
	background: #B40404;
	color: #fff;
	padding: 5px 15px;
}
.weak{
	background: #DF7401;
	color: #fff;
	padding: 5px 15px;
}
.medium{
	background: #FFFF00;
	color: #fff;
	padding: 5px 15px;
}
.strong{
	background: #9AFE2E;
	color: #fff;
	padding: 5px 15px;
}
.verystrong{
	background: #0B610B;
	color: #fff;
	padding: 5px 15px;
}

pwdMeter plugin accepts the following optional parameters:

minLength: The minimum length of the password.

displayGeneratePassword: If set to true, displays a link to generate random passwords.

generatePassText: You can specify any text that you’d like the “Generate Password” link read.

generatePassClass: This specifies the class for the “Generate Password” link.

randomPassLength: Specifying the length of the random password. Can be any integer for example 8, 10, 15 etc.

$("#password").pwdMeter({
	minLength: 6,
	displayGeneratePassword: false,
	generatePassText: 'Password Generator',
	generatePassClass: 'GeneratePasswordLink',
	randomPassLength: 13
});

Live Demo

Hope this tutorial will help you.