JavaScript Password Strength Validation Example
This JavaScript tutorial will show you how to validate the strength of password entered by the user for your application. The strength of a password is a function of length, complexity, and unpredictability. It is very important for you to keep your user information safe.
As we know that JavaScript is rich in features, so we can do that easily on the client side. Now one question comes to mind, how can we choose a strong password? It’s simple, to make your password strong you must need to use uppercase and lowercase alphabets, some numbers, and the special character. Check out these examples.
javascript123 is the very weak password, javascript@123 has medium strength, and JavaScript@123 is strong. It has all those values which are required in a strong password.
Check the complete example.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Password Strength Validation Example</title>
<script>
function validatePassword(password) {
// Do not show anything when the length of password is zero.
if (password.length === 0) {
document.getElementById("msg").innerHTML = "";
return;
}
// Create an array and push all possible values that you want in password
var matchedCase = new Array();
matchedCase.push("[$@$!%*#?&]"); // Special Charector
matchedCase.push("[A-Z]"); // Uppercase Alpabates
matchedCase.push("[0-9]"); // Numbers
matchedCase.push("[a-z]"); // Lowercase Alphabates
// Check the conditions
var ctr = 0;
for (var i = 0; i < matchedCase.length; i++) {
if (new RegExp(matchedCase[i]).test(password)) {
ctr++;
}
}
// Display it
var color = "";
var strength = "";
switch (ctr) {
case 0:
case 1:
case 2:
strength = "Very Weak";
color = "red";
break;
case 3:
strength = "Medium";
color = "orange";
break;
case 4:
strength = "Strong";
color = "green";
break;
}
document.getElementById("msg").innerHTML = strength;
document.getElementById("msg").style.color = color;
}
</script>
</head>
<body>
<strong>JavaScript Password Strength Validation Example</strong>
<div>
<label for="pwd">Password:</label>
<input type="text" id="pwd" onkeyup="validatePassword(this.value);"/><span id="msg"></span>
</div>
</body>
</html>References
Similar Posts
About the Author
