JavaScript Password Strength Validation Example

This JavaScript tutorial will show you how to validate 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 come in 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 these examples.

javascript123 is very weak password, javascript@123 has medium strength, and JavaScript@123 is strong. It has all those values which is required in strong password.

Check the complete example.

<!DOCTYPE html>
        <title>JavaScript Password Strength Validation Example</title>
            function validatePassword(password) {
                // Do not show anything when the length of password is zero.
                if (password.length === 0) {
                    document.getElementById("msg").innerHTML = "";
                // 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)) {
                // Display it
                var color = "";
                var strength = "";
                switch (ctr) {
                    case 0:
                    case 1:
                    case 2:
                        strength = "Very Weak";
                        color = "red";
                    case 3:
                        strength = "Medium";
                        color = "orange";
                    case 4:
                        strength = "Strong";
                        color = "green";
                document.getElementById("msg").innerHTML = strength;
                document.getElementById("msg").style.color = color;
        <strong>JavaScript Password Strength Validation Example</strong>

            <label for="pwd">Password:</label>
            <input type="text" id="pwd"  onkeyup="validatePassword(this.value);"/><span id="msg"></span>


Here you can check it live.

Share this article on: