In this article I will explain with an
example, how to implement Password complexity validation in JavaScript and jQuery.
The Password complexity validation in JavaScript and jQuery will be performed using Regular Expressions (Regex).
Implement Password complexity validation using JavaScript
The following HTML Markup consists of an HTML Input TextBox and an HTML SPAN element. The HTML Input TextBox has been assigned a JavaScript OnKeyUp event handler which calls the CheckPasswordStrength JavaScript function.
Inside the CheckPasswordStrength JavaScript function, an array of multiple Regular Expressions has been built.
When user types in the TextBox the CheckPasswordStrength JavaScript function is executed and the value of the TextBox is tested with each of the Regular Expression present in the Array and if the password matches the Regular Expression then the value of passed variable is incremented by 1.
Then the length of the Password is checked, if it is greater than 8 then the value of passed variable is incremented by 1.
Finally based on the final value of the passed variable, the result is displayed in the HTML SPAN element.
<input type="text" id="txtPassword" onkeyup="CheckPasswordStrength(this.value)" />
<span id="password_strength"></span>
<script type="text/javascript">
function CheckPasswordStrength(password) {
var password_strength = document.getElementById("password_strength");
//TextBox left blank.
if (password.length == 0) {
password_strength.innerHTML = "";
return;
}
//Regular Expressions.
var regex = new Array();
regex.push("[A-Z]"); //Uppercase Alphabet.
regex.push("[a-z]"); //Lowercase Alphabet.
regex.push("[0-9]"); //Digit.
regex.push("[$@$!%*#?&]"); //Special Character.
var passed = 0;
//Validate for each Regular Expression.
for (var i = 0; i < regex.length; i++) {
if (new RegExp(regex[i]).test(password)) {
passed++;
}
}
//Validate for length of Password.
if (passed > 2 && password.length > 8) {
passed++;
}
//Display status.
var color = "";
var strength = "";
switch (passed) {
case 0:
case 1:
strength = "Weak";
color = "red";
break;
case 2:
strength = "Good";
color = "darkorange";
break;
case 3:
case 4:
strength = "Strong";
color = "green";
break;
case 5:
strength = "Very Strong";
color = "darkgreen";
break;
}
password_strength.innerHTML = strength;
password_strength.style.color = color;
}
</script>
Implement Password complexity validation using jQuery
The following HTML Markup consists of an HTML Input TextBox and an HTML SPAN element. The HTML Input TextBox has been assigned a jQuery OnKeyUp event handler.
Inside the jQuery OnKeyUp event handler, an array of multiple Regular Expressions has been built.
When user types in the TextBox the jQuery OnKeyUp event handler is executed and the value of the TextBox is tested with each of the Regular Expression present in the Array and if the password matches the Regular Expression then the value of passed variable is incremented by 1.
Then the length of the Password is checked, if it is greater than 8 then the value of passed variable is incremented by 1.
Finally based on the final value of the passed variable, the result is displayed in the HTML SPAN element.
<input type="text" id="txtPassword" />
<span id="password_strength"></span>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtPassword").bind("keyup", function () {
//TextBox left blank.
if ($(this).val().length == 0) {
$("#password_strength").html("");
return;
}
//Regular Expressions.
var regex = new Array();
regex.push("[A-Z]"); //Uppercase Alphabet.
regex.push("[a-z]"); //Lowercase Alphabet.
regex.push("[0-9]"); //Digit.
regex.push("[$@$!%*#?&]"); //Special Character.
var passed = 0;
//Validate for each Regular Expression.
for (var i = 0; i < regex.length; i++) {
if (new RegExp(regex[i]).test($(this).val())) {
passed++;
}
}
//Validate for length of Password.
if (passed > 2 && $(this).val().length > 8) {
passed++;
}
//Display status.
var color = "";
var strength = "";
switch (passed) {
case 0:
case 1:
strength = "Weak";
color = "red";
break;
case 2:
strength = "Good";
color = "darkorange";
break;
case 3:
case 4:
strength = "Strong";
color = "green";
break;
case 5:
strength = "Very Strong";
color = "darkgreen";
break;
}
$("#password_strength").html(strength);
$("#password_strength").css("color", color);
});
});
</script>
Screenshot
![Implement Password complexity validation in JavaScript and jQuery]()
Demo
Downloads
