In this article I will explain how to implement Password Strength validation for Password TextBox with examples in JavaScript and jQuery.
The Password strength validation in JavaScript and jQuery will be performed using Regular Expressions (Regex).
 
Implement Password Strength validation using JavaScript
The following HTML Markup consists of an HTML Input TextBox and an HTML SPAN element. The HTML Input TextBox has been assigned a JavaScript OnKeyUp event handler which calls the CheckPasswordStrength JavaScript function.
Inside the CheckPasswordStrength JavaScript function, an array of multiple Regular Expressions has been built.
When user types in the TextBox the CheckPasswordStrength JavaScript function is executed and the value of the TextBox is tested with each of the Regular Expression present in the Array and if the password matches the Regular Expression then the value of passed variable is incremented by 1.
Then the length of the Password is checked, if it is greater than 8 then the value of passed variable is incremented by 1.
Finally based on the final value of the passed variable, the result is displayed in the HTML SPAN element.
<input type="text" id="txtPassword" onkeyup="CheckPasswordStrength(this.value)" />
<span id="password_strength"></span>
<script type="text/javascript">
    function CheckPasswordStrength(password) {
        var password_strength = document.getElementById("password_strength");
 
        //TextBox left blank.
        if (password.length == 0) {
            password_strength.innerHTML = "";
            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(password)) {
                passed++;
            }
        }
 
        //Validate for length of Password.
        if (passed > 2 && password.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.innerHTML = strength;
        password_strength.style.color = color;
    }
</script>
 
 
Implement Password Strength validation using jQuery
The following HTML Markup consists of an HTML Input TextBox and an HTML SPAN element. The HTML Input TextBox has been assigned a jQuery OnKeyUp event handler.
Inside the jQuery OnKeyUp event handler, an array of multiple Regular Expressions has been built.
When user types in the TextBox the jQuery OnKeyUp event handler is executed and the value of the TextBox is tested with each of the Regular Expression present in the Array and if the password matches the Regular Expression then the value of passed variable is incremented by 1.
Then the length of the Password is checked, if it is greater than 8 then the value of passed variable is incremented by 1.
Finally based on the final value of the passed variable, the result is displayed in the HTML SPAN element.
<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>
 
 
Screenshot
Password Strength validation example using JavaScript and jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads