Password strength indication with jQuery

Hi, In this tutorial we will learn, how to indicate a password strength with nice color change using jQuery and CSS.

password strength indication

HTML markup


<input type="password" name="password" placeholder="Enter Password" id="password"><br>
<br><label>Password Strength</label>
<ul class="strength">
 <li class="1"></li>
 <li class="2"></li>
 <li class="3"></li>
 <li class="4"></li>
 <li class="5"></li>
</ul>
<div id="comment"></div>

We have a password input filed with the id of password.

And an unordered list. We will use it to indicate password strength by changing the color of the list items

CSS


ul.strength { list-style: none; padding: 0;}
ul.strength li { width: 20px; height: 5px; background: #ddd; float: left; margin: 0 2px;}

Style list items with the above css code to create a nice indication bar.

If you want, you can style it with your own design</>

JQuery


	$(document).ready(function () {
	   $("#password").keyup(function () {
	       var input = $(this).val();
	       var res = strongCheck(input);
	   });

	});

Make sure that you’ve included jQuery Library.

Inside of $(document).ready() function we have a .keyup() function which will be executed instantly when you enter text in password field.

Inside of this function we have two variables input and res.

Input holds the value of the password filed at present and res holds a function called strongCheck

When you enter a character the value will be stored into the variable called input and will be sent to the strongCheck function as an argument.

function strongCheck()


function strongCheck (password) {
		
		var strength = 0;
		//if the password length is less than 6, return message.
		if (password.length < 6) { 
		   return 0;
		}
		else{
		   strength += 1;
			
		   //if password contains both lower and uppercase characters, increase strength value
		   if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1;
	
		   //if it has numbers and characters, increase strength value
		   if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 ;
				
		   //if it has one special character, increase strength value
		   if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1;
		
		   //if it has two special characters, increase strength value
		   if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;
		   return strength;
		}

}

strongCheck function has five checking conditions

First we’re checking for the password length and then we’re using regular expressions to check password strength

This function will return a integer value to the variable res.

Now we can style the unordered list we created earlier according to the returned value like below:


if (res <= 0) {
	$("#comment").html("Too Short!");
	$("ul.strength li").css("background-color", "#ddd");
}
else if (res == 1) {
	$("#comment").html("Weak!");
	$("ul.strength li").css("background-color", "#ddd");
	$("ul.strength li.1").css("background-color", "#F22");
}
else if (res == 2) {
	$("#comment").html("Fair!");
	$("ul.strength li").css("background-color", "#ddd");
	for(var i=1; i<=res; i++){
		$("ul.strength li."+i).css("background-color", "#FF6922");
	}
}
else if (res == 3) {
	$("#comment").html("Good!");
	$("ul.strength li").css("background-color", "#ddd");
	for(var i=1; i<=res; i++){
		$("ul.strength li."+i).css("background-color", "#FFE422");
	}
}
else if (res == 4) {
	$("ul.strength li").css("background-color", "#ddd");
	$("#comment").html("Strong!");
	for(var i=1; i<=res; i++){
		$("ul.strength li."+i).css("background-color", "#A7E623");
	}
}
else{
	$("ul.strength li").css("background-color", "#ddd");
	$("#comment").html("Stronggest!");
	for(var i=1; i<=res; i++){
		$("ul.strength li."+i).css("background-color", "#21A300");
	}
}

That’s it guys, Feel free to comment your doubts and feedbacks below. See you.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

One comment on “Password strength indication with jQuery”

Leave a Reply

Your email address will not be published. Required fields are marked *