简体   繁体   English

使用 javascript / jquery 检查密码强度

[英]Check password strength using javascript / jquery

I am looking to implement a password strength feature for my textbox in my asp.net website.我希望在我的 asp.net 网站中为我的文本框实现密码强度功能。

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.如果有人可以帮助我编写代码,我将不胜感激。

Add break into case 3 and case 0 .break添加到case 3case 0中。 Then set default after case 5 .然后在case 5之后设置default

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

EDIT:编辑:

I updated your function我更新了你的 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/测试: https://jsfiddle.net/Lko29h8m/1/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM