如何更改（打勾）輸入密碼時驗證密碼的提示？

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爲 「新密碼」。但我上面的編碼不起作用。我只有顯示器，但沒有工作。

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"); 
       } 
      }