Friday 25 August 2017

How to Code for Password Strength Checker in javascript?

Here we use Java Script for checking the password strength ..
we are calculate the strength on the basis of five criteria that is defined below...

If  Password contains at least 8 characters then we add 20 number in score.
If  Password contains at least 1 lower case characters then we add 20 number in score.
If  Password contains at least 1 Uppercase characters then we add 20 number in score.
If  Password contains at least 1 number  then we add 20 number in score.
If  Password contains at least 1 special case characters then we add 20 number in score.


Here we use A textbox for Password and on the  onKeyup events of text box we call a javascript function to check the strength of password...

HTML and javascript code is given below.. Copy it and paste into the page and run ...

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <table>
             <tr>
            <td>
                <asp:Label ID="Label2" runat="server" Text="User Name"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtUserName"  runat="server"></asp:TextBox>
            </td></tr>
                  <tr>
            <td>
                <asp:Label ID="Label1" runat="server" Text="Password"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtPass" onKeyUp="CheckPasswordStrength()" TextMode="Password" runat="server"></asp:TextBox>
            </td>
         
            <td>
                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
            </td>
        </tr>
        </table>
        <script type="text/javascript">
            function CheckPasswordStrength()
            {
                var PasswordTextBox = document.getElementById("txtPass");
                var password = PasswordTextBox.value;
                var Specialcharacter = "!@#$%^&*_~";
                var PasswordScore = 0;
                for(var i=0;i<=password.length;i++)
                {
                    if(Specialcharacter.indexOf(password.charAt(i))>-1)
                    {
                        PasswordScore += 20;
                    }
                }
                if(/[a-z]/.test(password))
                {
                    PasswordScore += 20;
                }

                if (/[A-Z]/.test(password)) {
                    PasswordScore += 20;
                }

                if (/[\d]/.test(password)) {
                    PasswordScore += 20;
                }
                if(password.length>=8)
                {
                    PasswordScore += 20;
                }
                var strength = "";
                var backgroundColor = " ";
                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("Label4").innerHTML = strength;
                PasswordTextBox.style.color = "White";
                PasswordTextBox.style.backgroundColor = backgroundColor;
            }
        </script>
      </div>
    </form>
</body>
</html>

No comments:

Post a Comment

Creating First WEB API Project from scratch ?

  For creating Web API project open your Visual Studio Editor and Create New Project as shown in below figure. Now you have to select  ASP.N...