Password Strength Checker and Show Password in jQuery

It is very important to make your website login system more secure to prevent any type of theft or hijacking. So it very important to have a more complex password that cannot be cracked by anyone and the same time password should be remember. These days security is the major issue for website administrator, so it need to secure login detail.

When it comes at user end where we are allowing our user to create their own password. We need to check the user password strength whether it is strong or weak. If their password is weak, we should give them suggestion to make their password strong and secure.

This tutorial will show you to create a password strength checker where we can check the strength of the user's inputted password and indicate whether it is weak or strong and provide suggestion to make a stronger password.

Code Explanation:

HTML Form

First we need to create a HTML form and put two password input field. One password field is for password and another is for re password or confirm password. This confirm password field will ensure that user did not mistype their password.
Here we have a "show password" checkbox field to see the password in text format to ensure the spelling after input the password. User can ensure that they have kept their desired password.

<form action="" method="post" class="checkPasswordMatch">
<div class="setLabel">Password Strength Checker</div>
<div><input type="password" id="pwd1" placeholder="Enter Your Password" class="pwd_fld"/></div>
<div><input type="password" id="pwd2" placeholder="Re Enter Your Password" class="pwd_fld"/></div>
<input type="checkbox" id="showHide"> <span class="showPass">Show Password? </span><br/>
<div id="setPasswordMessage" style="display:none;"></div>

</form>

jQuery Snippet for password Strength

In jQuery, we set some parameter to check whether password is weak, average, strong or very strong. for this we use regular expression to check input value.

The regular expression parameter Password Cretria is given below:

/*=========== Start: Set Password Cretria Regular Expression ===================*/
	
	//Password must contain 5 or more characters
	var lowPassword = /(?=.{5,}).*/;  

	//Password must contain at least one digit and lower case letters .
	var mediumPassword = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/;
	
	//Password must contain at least one digit, one upper case letter and one lower case letter.
	var averagePassword = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; 

	//Password must contain at least one digit, one upper case letter and one lower case letter.
	var strongPassword = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{5,}$/; 

	/*=========== End: Set Password Cretria Regular Expression ===================*/

 

To show the password value in text format we use jQuery Given below:

<script type="text/javascript">
	$(document).ready(function () {
		$("#showHide").click(function () {
			if ($("#pwd1").attr("type")=="password") {
				$("#pwd1").attr("type", "text");
			}
			else{
				$("#pwd1").attr("type", "password");
			}
	
		});
	});
</script>

This jQuery just takes the input value and convert into text type and show the charactor.

Combining all Javascript together, We have below Javascript file for checking password strength and show password.

<script type="text/javascript">
$(document).ready(function() {
	var pwd1 		= $('#pwd1'); //id of first password field
	var pwd2		= $('#pwd2'); //id of second password field
	var pwdIdSet 	= $('#setPasswordMessage'); //id of indicator element
	
	setCheckPasswordStrength(pwd1,pwd2,pwdIdSet); //call password check function
	
});

function setCheckPasswordStrength(pwd1, pwd2, pwdIdSet)
{
	/*=========== Start: Set Password Cretria Regular Expression ===================*/
	
	//Password must contain 5 or more characters
	var lowPassword = /(?=.{5,}).*/;  

	//Password must contain at least one digit and lower case letters .
	var mediumPassword = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/;
	
	//Password must contain at least one digit, one upper case letter and one lower case letter.
	var averagePassword = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; 

	//Password must contain at least one digit, one upper case letter and one lower case letter.
	var strongPassword = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{5,}$/; 

	/*=========== End: Set Password Cretria Regular Expression ===================*/
	
// test() method is used to test match in a string whether the value is matched in a string or not.

	$(pwd1).on('keyup', function(e) {
		document.getElementById("setPasswordMessage").style.display="block";
		if(strongPassword.test(pwd1.val()))
		{
			pwdIdSet.removeClass().addClass('strongPassword').html("Very Strong! Please use this password!");
		}	
		else if(averagePassword.test(pwd1.val()))
		{
			pwdIdSet.removeClass().addClass('averagePassword').html("Strong! Tips: Enter special chars to make even stronger");
		}	
		else if(mediumPassword.test(pwd1.val()))
		{
			pwdIdSet.removeClass().addClass('mediumPassword').html("Good! Tips: Enter uppercase letter to make strong");
		}
		else if(lowPassword.test(pwd1.val()))
    	{
			pwdIdSet.removeClass().addClass('stilllowPassword').html("Still Weak! Tips: Enter digits to make good password");
    	}
		else
		{
			pwdIdSet.removeClass().addClass('lowPassword').html("Very Weak! Please use 5 or more chars password)");
		}
	});
	
	$(pwd2).on('keyup', function(e) {
		
		if(pwd1.val() !== pwd2.val())
		{
			pwdIdSet.removeClass().addClass('lowPassword').html("Passwords do not match!");	
		}else{
			pwdIdSet.removeClass().addClass('goodpass').html("Passwords match!");	
		}
			
	});
}
</script>

<script type="text/javascript">
	$(document).ready(function () {
		$("#showHide").click(function () {
			if ($("#pwd1").attr("type")=="password") {
				$("#pwd1").attr("type", "text");
			}
			else{
				$("#pwd1").attr("type", "password");
			}
	
		});
	});
</script>

Here, test() method is used to test match in a string whether the value is matched in a string or not.

 

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments