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.

pwd-strength-validate.html
<!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>

Similar Posts

About the Author

Atul Rai
I love sharing my experiments and ideas with everyone by writing articles on the latest technological trends. Read all published posts by Atul Rai.