パスワードの入力時にパスワードのヒントを変更する方法

Question

私は、入力中に指定したパスワードに関して、有効なパスワードのヒントを変更することで、クライアント側でパスワードを検証しようとしています。コーディング/サーバー側では、すでに検証とその動作を追加しました。クライアント側では、ヒントを使用してユーザーに警告する必要があります。

例だけ私が欲しいどのように：

。

私はそれがパスワードの検証を満たしたら、OKにglyphicon削除アイコンを変更したいです。これは、パスワードが有効かどうかをユーザーに伝える指示です。

以下のコード：以下

<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でちょうど誤植のように見えます。配列の1つをループするたびに、regex1 [i]の代わりにregex [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"); 
       } 
      }