Question

在tutorial之后，我调整了脚本而不是显示渐变进度条，使用li项目显示块进度条，如下所示：

<ul id="passwordStrength">
    <li class="point-reg"></li>
    <li class="point-reg"></li>
    <li class="point-reg"></li>
    <li class="point-reg"></li>
</ul>

根据填写的条件，第一个li项目将填充红色，然后第二个li将填充，如果他们使用大写字符或特殊字符等，直到用户有符合所有条件，第4个li项目填充深绿色。

我有两个问题（我知道我应该把每个帖子都放在一个问题上）。

首先是li物品的着色。当用户从输入中删除文本时，我希望着色重置为默认值#dcdcdc。

其次是reg exp中的不一致行为。当我在数字前面输入一个特殊字符时，它只记录特殊字符，因此计数器永远不会达到4，因此强度条变为绿色并填充最终li项的语句永远不会发生。

问题/ S

如果用户删除输入，如何将每个li项目的颜色重置为灰色，从而填充条件？

为什么当我输入一个特殊字符时，即使我按下一个数字，它仍然只能注册特殊字符？

提出两个问题的道歉。

$('#password').bind('keyup', function(){

    if($(this).val().length == 0) {
        password_li.css('background', '#DDD');
        return;
    }

        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())) {
            console.log(regex[i]) //here I can see what expression is being entered
            passed++;
        }
    }


    //Validate for length of Password.
    if (passed > 2 && $(this).val().length > 8) {
        passed++;
    }

    switch(passed) {
        case 0:
        break;
        case 1:
        console.log('red')
            $(password_li[0]).css('background', '#e30613'); //red
        break;
        case 2:
        console.log('amber')
            $(password_li[1]).css('background', '#f9b233'); //amber
        break;
        case 3:
        console.log('green')
            $(password_li[2]).css('background', '#53ab58'); //green
        break;
        case 4:
        console.log('dark green')
            $(password_li[3]).css('background', '#53ab58');
        break;


    }

})

更新

解决了将颜色重置为灰色的问题。现在只是reg exp问题

Answer 1

我认为你需要数到5，而不是4，因为你有5个测试，包括长度。这里的附加调试表明它正常工作：

$password="aA$"
var passed = 0;

for (var i = 0; i < regex.length; i++) {
    if (new RegExp(regex[i]).test($password)) {
        passed++;
        console.log(regex[i]+" passed "+passed)         
    } else {
        console.log(regex[i]+" failed")
    }
}
console.log("Total "+passed);

结果：

[A-Z] passed 1
[a-z] passed 2
[0-9] failed
[$@$!%*#?&] passed 3
Total 3

Reg exp功能打破密码强度功能

1 个答案: