Password strength validation in JavaScript
Password strength is a volume of the effectiveness of a password against guessing. This indicates how many trials that an attacker, which does not have direct access to the password, must accurately estimate.
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. When you are registering in a website or web application you can force them to register with their strong password. Long passwords will be difficult to guess on others. If you think yourself as a user then you will be thinking of entering a strong password.
How to show users that the password they entered in the text field is strong or weak on which user can take the decision to keep it or change it.
So as a solution to it you can make your password safe in a web page using few JavaScript code, which code goes as below.
Sourcecode:
Password Input:
<div> <input type="text" id="pass" onkeyup="pwdStrength(this.value)"/> </div> <label>Password Strength: </label><span id="show_msg"></span> <input type="submit" id="save_password" value="save_password">
Password Strength:
<script type="text/javascript"> function pwdStrength(pwd) { var show_msg = document.getElementById("show_msg"); if (pwd.length == 0) { show_msg.innerHTML = ""; return; } 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; for (var i = 0; i < regex.length; i++) { if (new RegExp(regex[i]).test(pwd)) { passed++; } } //Display status. var color = ""; var strength = ""; switch (passed) { case 0: case 1: case 2: strength = "Very Weak"; color = "#eb1f10"; break; case 3: strength = "Medium"; color = "#e88b09"; break; case 4: strength = "Strong"; color = "#32f20c"; break; } show_msg.innerHTML = strength; show_msg.style.color = color; if(passed <= 2){ document.getElementById('save_password').disabled = true; }else{ document.getElementById('save_password').disabled = false; } } </script>
Thanks for tutorial, it so easy to learn