jquery password strength Checker using regular expression

jquery password strength Checker using regular expression

jquery password strength Checker using regular expression

In this Post We Will Explain About is jquery password strength Checker using regular expression With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Password Strength Checker In jQueryExample

In this post we will show you Best way to implement How to check password strength using jQuery Code Example, hear for jQuery Plugin For Password Strength Checker and Indicatorwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

simple Password Strength checker is very and easy way to learn and useful thing for websites or application security based that allow user registration form and password resets.

HTML Part

<body>
<form action="" method="post" id="liveappPass">
<div><input type="password" id="firstPass" /></div>
<div><input type="password" id="secondpass" /></div>
<div id="defult-pass-level"></div>
</form>
</body>

CSS Part

<style type="text/css">
#liveappPass {
	width: 400px;
	padding: 20px;
	border: 2px solid #DDD;
	border-radius: 4px;
	margin-left: auto;
	margin-right: auto;
	background: #F0F0F0;
}
#liveappPass input[type="password"]{
	width: 97.5%;
	height: 25px;
	margin-bottom: 5px;
	padding-left: 5px;
	font-size: 25px;
	color: #829CBD;
	border: 2px solid #DDD;
	border-radius: 4px;
	line-height: 25px;
}
#defult-pass-level{
	width: 97.5%;
	height: 25px;
	border: 2px solid #DDD;
	border-radius: 4px;
	color: #829CBD;
	text-align: center;
	font: 12px/25px Arial, Helvetica, sans-serif;
}
#defult-pass-level.weeklevelpass{
	border: 2px solid #FF9191;
	background: #FFC7C7;
	color: #94546E;
	text-shadow: 2px 2px 2px #CCFFCC;
}
#defult-pass-level.stillweeklevelpass {
	border: 2px solid #FBB;
	background: #FDD;
	color: #945870;
	text-shadow: 2px 2px 2px #CCFFCC;
}
#defult-pass-level.coolpass {
	border: 2px solid #C4EEC8;
	background: #E4FFE4;
	color: #51926E;
	text-shadow: 2px 2px 2px #CCFFCC;
}
#defult-pass-level.strongpass {
	border: 2px solid #6ED66E;
	background: #79F079;
	color: #348F34;
	text-shadow: 2px 2px 2px #CCFFCC;
}
#defult-pass-level.verystrongpass {
	border: 2px solid #379137;
	background: #48B448;
	color: #CDFFCD;
	text-shadow: 2px 2px 2px #296429;
}
</style>

Script Part

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var firstPass 		= $('#firstPass'); 
	var secondpass		= $('#secondpass'); 
	var passmessageVal 	= $('#defult-pass-level');
	
	passwordStrengthCheck(firstPass,secondpass,passmessageVal); //call password check function
	
});

function passwordStrengthCheck(firstPass, secondpass, passmessageVal)
{
	
	var badpass = /(?=.{5,}).*/; 
	
	var centelevlrpass = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; 
	
	var highLevelpass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; 
	
	var VryhighLevelpass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{5,}$/; 
	
	$(firstPass).on('keyup', function(e) {
		if(VryhighLevelpass.test(firstPass.val()))
		{
			passmessageVal.removeClass().addClass('verystrongpass').html("Very Strong! Nice 1 (Awesome, please don't forget your pass now!)");
		}	
		else if(highLevelpass.test(firstPass.val()))
		{
			passmessageVal.removeClass().addClass('strongpass').html("Strong! (Enter please special chars to create even stronger");
		}	
		else if(centelevlrpass.test(firstPass.val()))
		{
			passmessageVal.removeClass().addClass('coolpass').html("Good! (please Enter simple uppercase letter to create strong)");
		}
		else if(badpass.test(firstPass.val()))
    	{
			passmessageVal.removeClass().addClass('stillweeklevelpass').html("please now Still Weak! (Enter digits only to make your good password)");
    	}
		else
		{
			passmessageVal.removeClass().addClass('weeklevelpass').html("Very Weak! your password (Must be 5 char or more chars)");
		}
	});
	
	$(secondpass).on('keyup', function(e) {
		
		if(firstPass.val() !== secondpass.val())
		{
			passmessageVal.removeClass().addClass('weeklevelpass').html("your Passwords do not match!");	
		}else{
			passmessageVal.removeClass().addClass('coolpass').html("your Passwords match!");	
		}
			
	});
}
</script>

Complete Full Example of jquery password strength checker

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Password Pakainfo.com</title>
<style type="text/css">
#liveappPass {
	width: 400px;
	padding: 20px;
	border: 2px solid #DDD;
	border-radius: 4px;
	margin-left: auto;
	margin-right: auto;
	background: #F0F0F0;
}
#liveappPass input[type="password"]{
	width: 97.5%;
	height: 25px;
	margin-bottom: 5px;
	padding-left: 5px;
	font-size: 25px;
	color: #829CBD;
	border: 2px solid #DDD;
	border-radius: 4px;
	line-height: 25px;
}
#defult-pass-level{
	width: 97.5%;
	height: 25px;
	border: 2px solid #DDD;
	border-radius: 4px;
	color: #829CBD;
	text-align: center;
	font: 12px/25px Arial, Helvetica, sans-serif;
}
#defult-pass-level.weeklevelpass{
	border: 2px solid #FF9191;
	background: #FFC7C7;
	color: #94546E;
	text-shadow: 2px 2px 2px #CCFFCC;
}
#defult-pass-level.stillweeklevelpass {
	border: 2px solid #FBB;
	background: #FDD;
	color: #945870;
	text-shadow: 2px 2px 2px #CCFFCC;
}
#defult-pass-level.coolpass {
	border: 2px solid #C4EEC8;
	background: #E4FFE4;
	color: #51926E;
	text-shadow: 2px 2px 2px #CCFFCC;
}
#defult-pass-level.strongpass {
	border: 2px solid #6ED66E;
	background: #79F079;
	color: #348F34;
	text-shadow: 2px 2px 2px #CCFFCC;
}
#defult-pass-level.verystrongpass {
	border: 2px solid #379137;
	background: #48B448;
	color: #CDFFCD;
	text-shadow: 2px 2px 2px #296429;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var firstPass 		= $('#firstPass'); 
	var secondpass		= $('#secondpass'); 
	var passmessageVal 	= $('#defult-pass-level');
	
	passwordStrengthCheck(firstPass,secondpass,passmessageVal); //call password check function
	
});

function passwordStrengthCheck(firstPass, secondpass, passmessageVal)
{
	
	var badpass = /(?=.{5,}).*/; 
	
	var centelevlrpass = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; 
	
	var highLevelpass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/; 
	
	var VryhighLevelpass = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{5,}$/; 
	
	$(firstPass).on('keyup', function(e) {
		if(VryhighLevelpass.test(firstPass.val()))
		{
			passmessageVal.removeClass().addClass('verystrongpass').html("Very Strong! Nice 1 (Awesome, please don't forget your pass now!)");
		}	
		else if(highLevelpass.test(firstPass.val()))
		{
			passmessageVal.removeClass().addClass('strongpass').html("Strong! (Enter special chars to make even stronger");
		}	
		else if(centelevlrpass.test(firstPass.val()))
		{
			passmessageVal.removeClass().addClass('coolpass').html("Good! (Enter uppercase letter to make strong)");
		}
		else if(badpass.test(firstPass.val()))
    	{
			passmessageVal.removeClass().addClass('stillweeklevelpass').html("Still Weak! (Enter digits to make good password)");
    	}
		else
		{
			passmessageVal.removeClass().addClass('weeklevelpass').html("Very Weak! (Must be 5 or more chars)");
		}
	});
	
	$(secondpass).on('keyup', function(e) {
		
		if(firstPass.val() !== secondpass.val())
		{
			passmessageVal.removeClass().addClass('weeklevelpass').html("Passwords do not match!");	
		}else{
			passmessageVal.removeClass().addClass('coolpass').html("Passwords match!");	
		}
			
	});
}
</script>
</head>

<body>
<form action="" method="post" id="liveappPass">
<div><input type="password" id="firstPass" /></div>
<div><input type="password" id="secondpass" /></div>
<div id="defult-pass-level"></div>
</form>
</body>
</html>

Example

I hope you have Got What is password validation in jquery using regular expression And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.


Related FAQ

Here are some more FAQ related to this Article:

  1.   jQuery Regular Expression Real Time Form Validation Example
  2.   Validate Email and Password Fields on Form Submit Event
  3.   Ajax Autocomplete Live Search Suggestion using PHP MySQL
  4.   Advanced jQuery Tips Tricks and Solutions
  5.   jquery Multiple step form validation
  6.   ng-mousedown Event using Angular Example
  7.   Toggle Switches Laravel, Ajax and jQuery example
  8.   Validate Email Password Using jQuery
  9.   How to Get the Value of Selected Option in a Combo Box Using jQuery?
  10.   JQuery Remove combobox items(options) from DropDownList