Password must be
secure and strong. We will use five different ways to check password strength:
1.
Password length
2.
Capital Letters
3.
Small letters
4.
Special Characters
5. Numeric Numbers
Following JavaScript/JQuery code will be used to check Password Strength: Key Up event of textbox will be used to check strength of password.
|
<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>
|
Example With HTML:
|
<div> <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>
</div>
|
