javascript - 正则表达式功能打破密码强度功能

Question

关注此tutorial ，我调整了脚本，因此不显示渐变进度条，而是使用 li 项目显示 block 进度条，如下所示:

<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 项的语句永远不会发生。

问题

如果用户删除输入，从而满足条件，如何将每个 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