Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

JavaScript password strength checker

Suggested Videos
Part 10 - ASP.NET control client id in JavaScript
Part 11 - JavaScript calendar date picker for ASP.NET
Part 12 - Warn user before leaving web page with unsaved changes



In this video we will discuss how to implement a simple password strength checker using JavaScript.



As we type the password in the password TextBox, the strength of the password should be displayed in a label control.
JavaScript password strength checker

The password strength is determined based on the following scoring criteria.
If the password contain at least 8 characters 20 Points
If the password contain at least 1 lowercase letter 20 Points
If the password contain at least 1 uppercase letter 20 Points
If the password contain at least 1 special character 20 Points

The password strength is determined using the following scale.
Password score Password Strength
>= 100 Strong Strong
>= 80 Medium
>= 60 Weak
< 60 Very Weak

Example : 
<asp:TextBox ID="TextBox1" runat="server" TextMode="Password"
             onkeyup="checkPasswordStrength()">
</asp:TextBox>
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<script type="text/javascript">
    function checkPasswordStrength()
    {
        var passwordTextBox = document.getElementById("TextBox1");
        var password = passwordTextBox.value;
        var specialCharacters = "!£$%^&*_@#~?";
        var passwordScore = 0;

        passwordTextBox.style.color = "white";

        // Contains special characters
        for (var i = 0; i < password.length; i++)
        {
            if (specialCharacters.indexOf(password.charAt(i)) > -1)
            {
                passwordScore += 20;
                break;
            }
        }

        // Contains numbers
        if (/\d/.test(password))
            passwordScore += 20;

        // Contains lower case letter
        if (/[a-z]/.test(password))
            passwordScore += 20;

        // Contains upper case letter
        if (/[A-Z]/.test(password))
            passwordScore += 20;

        if (password.length >= 8)
            passwordScore += 20;

        var strength = "";
        var backgroundColor = "red";

        if (passwordScore >= 100)
        {
            strength = "Strong";
            backgroundColor = "green";
        }
        else if (passwordScore >= 80)
        {
            strength = "Medium";
            backgroundColor = "gray";
        }
        else if (passwordScore >= 60)
        {
            strength = "Weak";
            backgroundColor = "maroon";
        }
        else
        {
            strength = "Very Weak";
            backgroundColor = "red";
        }

        document.getElementById("lblMessage").innerHTML = strength;
        passwordTextBox.style.backgroundColor = backgroundColor;
    }
</script>

JavaScript with ASP.NET tutorial

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.