如何在键入密码时更改（勾选）验证密码的提示？

Question

我正在尝试在键入时验证客户端密码，方法是更改​​有关给定密码的密码提示。在编码/服务器端，我已经添加了验证并且它也在工作。在客户端，我想使用提示提醒用户。

仅举例说明我的意思：

。

我想在符合密码验证后将glyphicon删除图标更改为OK。这只是告诉用户密码有效或无效的用户指示。

代码如下：

<div class="row" style="text-align:left; font-weight:bold ; color:navy;">
 Password Hint:
</div>
<div class="row" style=" color:black; margin:10px 0px">   
<span id="Length" class="glyphicon glyphicon-remove" style="font-weight:bold;color:red "></span> &nbsp; Minimum 6 digits
<br /><span id="UpperCase" class="glyphicon glyphicon-remove" style="font-weight:bold;color:red "></span> &nbsp;Atleast 1 upper case letters (A – Z)
<br /><span id="LowerCase" class="glyphicon glyphicon-remove" style="font-weight:bold;color:red "></span>&nbsp; Atleast 1 Lower case letters (a – z)
<br /><span id="Numbers" class="glyphicon glyphicon-remove" style="font-weight:bold;color:red "></span> &nbsp;Atleast 1 number (0 – 9)
<br /><span id="Symbols" class="glyphicon glyphicon-remove" style="font-weight:bold;color:red "></span>&nbsp; Atleast 1 non-alphanumeric symbol (e.g. ‘@@Z$%£!’)
</div>

脚本如下：

<script type="text/javascript" >
        $(function () {
        $("#NewPassword").bind("keyup", function () {
         var regex1 = new Array();
        var regex2 = new Array();
        var regex3 = new Array();
        var regex4 = new Array();
            regex1.push("[A-Z]"); //Uppercase Alphabet.
            regex2.push("[a-z]"); //Lowercase Alphabet.
            regex3.push("[0-9]"); //Digit.
            regex4.push("[!@@#$%^&*]"); //Special Character.

         if ($(this).val().length<6) {
                $('#Length').removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok ");              
            }

        for (var i = 0; i < regex1.length; i++) {
                if (new RegExp(regex[i]).test($(this).val())) {
                    $('#UpperCase').removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok ");
                }
            }
         for (var i = 0; i < regex2.length; i++) {
                if (new RegExp(regex[i]).test($(this).val())) {
                    $('#LowerCase').removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok");
                }
            }
         for (var i = 0; i < regex3.length; i++) {
                if (new RegExp(regex[i]).test($(this).val())) {
                    $('#Numbers').removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok");
                }
            }
         for (var i = 0; i < regex4.length; i++) {
                if (new RegExp(regex[i]).test($(this).val())) {
                    $('#Symbols').removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok");
                }
            }
        });
        });
    </script>

我的密码文本框ID是“NewPassword”。但我上面的编码不起作用。我只有显示器，但没有工作。

Answer 1

它看起来只是你的javascript中的拼写错误。每次循环遍历其中一个数组时，你引用的是regex [i]而不是regex1 [i]，或者是你的循环数组。

我稍微调整了样式，只是为了让它在本地工作。

<div class="row" style=" color:black; margin:10px 0px">
        <p id="Length" class="alert alert-danger">Minimum 6 digits</p>
        <p id="UpperCase" class="alert alert-danger">At least 1 upper case letters (A – Z)</p>
        <p id="LowerCase" class="alert alert-danger"> At least 1 Lower case letters (a – z)</p>
        <p id="Numbers" class="alert alert-danger">At least 1 number (0 – 9)</p>
        <p id="Symbols" class="alert alert-danger"> At least 1 non-alphanumeric symbol (e.g. ‘@@Z$%£!’)</p>
    </div>

这是在设置了正则表达式变量之后的javascript。

$('p.alert').removeClass('alert-success').addClass('alert-danger');

            if ($(this).val().length<6) {
                $('#Length').removeClass("alert-danger").addClass("alert-success");
            }

            for (var i = 0; i < regex1.length; i++) {
                if (new RegExp(regex1[i]).test($(this).val())) {
                    $('#UpperCase').removeClass("alert-danger").addClass("alert-success");
                }
            }
            for (var i = 0; i < regex2.length; i++) {
                if (new RegExp(regex2[i]).test($(this).val())) {
                    $('#LowerCase').removeClass("alert-danger").addClass("alert-success");
                }
            }
            for (var i = 0; i < regex3.length; i++) {
                if (new RegExp(regex3[i]).test($(this).val())) {
                    $('#Numbers').removeClass("alert-danger").addClass("alert-success");
                }
            }
            for (var i = 0; i < regex4.length; i++) {
                if (new RegExp(regex4[i]).test($(this).val())) {
                    $('#Symbols').removeClass("alert-danger").addClass("alert-success");
                }
            }