Check password strength using javascript / jquery

Question

I am looking to implement a password strength feature for my textbox in my asp.net website.

Currently, my code looks like this:

<span id="password_strength"></span>
<script type="text/javascript">
    function CheckPasswordStrength(password) {
        var password_strength = document.getElementById("password_strength");

        //if textBox is empty
        if(password.length==0){
            password_strength.innerHTML = "";
            return;
        }

        //Regular Expressions
        var regex = new Array();
        regex.push("[A-Z]"); //For Uppercase Alphabet
        regex.push("[a-z]"); //For Lowercase Alphabet
        regex.push("[0-9]"); //For Numeric Digits
        regex.push("[$@$!%*#?&]"); //For Special Characters

        var passed = 0;

        //Validation for each Regular Expression
        for (var i = 0; i < regex.length; i++) {
            if(new RegExp (regex[i]).test(password){
                passed++;
            }
        }

        //Validation for Length of Password
        if(passed > 2 && password.length > 8){
            passed++;
        }

        //Display of Status
        var color = "";
        var passwordStrength = "";
        switch(passed){
            case 0:
            case 1:
                passwordStrength = "Password is Weak.";
                color = "Red";
                break;
            case 2:
                passwordStrength = "Password is Good.";
                color = "darkorange";
                break;
            case 3:
            case 4:
                passwordStrength = "Password is Strong.";
                color = "Green";
                break;
            case 5:
                passwordStrength = "Password is Very Strong.";
                color = "darkgreen";
                break;
        }
        password_strength.innerHTML = passwordStrength;
        password_strength.style.color = color;
    }
</script>

<div class="row">
    <div class="col-sm-6">
        <center><asp:label runat="server" text="Password :" Font-Bold="True" Font-Italic="False"></asp:label></center>
        <center><asp:TextBox ID="tbPassword" runat="server" onkeyup="CheckPasswordStrength(this.value)"></asp:TextBox></center>
    </div>
</div>

I found this code online. I tried it on my website and it does not work. I would really appreciate if somebody can help me with my code.

Welcome to Stack Overflow! Please have a read over stackoverflow.com/help/how-to-ask for assistance in asking the right types of questions. I'd suggest with this example above asking something specific. The way it's worded now sounds like you're asking us to do research and find issues in your code snippet that you didn't write, and solve it for you. You should be able to ask a specific question first. — mariocatch
– mariocatch, Commented Aug 5, 2016 at 2:07
I have no idea what "does not work" means. Describe exact behavior. What is it doing, which line of code does it deviate from what you expect? — mason
– mason, Commented Aug 5, 2016 at 2:25

Dave · Accepted Answer · 2016-08-06 15:08:16Z

5

Add break into case 3 and case 0. Then set default after case 5.

http://www.w3schools.com/js/js_switch.asp

EDIT:

I updated your function

 function CheckPasswordStrength(password) {
  var password_strength = document.getElementById("password_strength");


    //if textBox is empty
    if(password.length==0){
        password_strength.innerHTML = "";
        return;
    }

    //Regular Expressions
    var regex = new Array();
    regex.push("[A-Z]"); //For Uppercase Alphabet
    regex.push("[a-z]"); //For Lowercase Alphabet
    regex.push("[0-9]"); //For Numeric Digits
    regex.push("[$@$!%*#?&]"); //For Special Characters

    var passed = 0;

    //Validation for each Regular Expression
    for (var i = 0; i < regex.length; i++) {
        if((new RegExp (regex[i])).test(password)){
            passed++;
        }
    }

    //Validation for Length of Password
    if(passed > 2 && password.length > 8){
        passed++;
    }

    //Display of Status
    var color = "";
    var passwordStrength = "";
    switch(passed){
        case 0:
            break;
        case 1:
            passwordStrength = "Password is Weak.";
            color = "Red";
            break;
        case 2:
            passwordStrength = "Password is Good.";
            color = "darkorange";
            break;
        case 3:
                break;
        case 4:
            passwordStrength = "Password is Strong.";
            color = "Green";
            break;
        case 5:
            passwordStrength = "Password is Very Strong.";
            color = "darkgreen";
            break;
    }
    password_strength.innerHTML = passwordStrength;
    password_strength.style.color = color;
}

Test: https://jsfiddle.net/Lko29h8m/1/

edited Aug 6, 2016 at 15:08

answered Aug 5, 2016 at 5:25

Dave

2,9202 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MrStutterz Over a year ago

How do i add in the default after case 5? :)

MrStutterz Over a year ago

Thank You so much for all the help. The password strength function finally works on my asp.net website... :)

Collectives™ on Stack Overflow

Check password strength using javascript / jquery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related