如何使用 jquery/javascript 動態檢查密碼驗證？

Question

在將我的問題指定為重復之前，請仔細閱讀我的問題。 嗨，我嘗試在按鍵期間動態驗證密碼。 實際上，它在輸入密碼時對我有用。 但是當我刪除密碼時，只有 2 個條件滿足。 我的代碼和圖片如下：

我的密碼框 html 代碼是

 <div class="form-group has-feedback">
 <input class="form-control" id="NewPassword" placeholder="New Password"  onkeypress="EnterPassword()" onkeydown="DeletePassword()" type="password">
 <span class="glyphicon glyphicon-lock form-control-feedback"></span>
 </div>

我在密碼的每個條件前使用了 glyphicon-remove 。 當我輸入密碼時，如果條件滿足，每個圖標都會更改為 glyphicon-ok。

這些是我的帶有圖標的密碼條件：

讓我們假設我的密碼是 Password@123，它包含我所有需要的東西，所以所有的圖標都變成了 ok。

但是當我刪除密碼時，只有 2 個條件滿足。

函數代碼如下：

 <script type="text/javascript" >
           function EnterPassword() {
            $("#NewPassword").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(regex1[i]).test($(this).val())) {
     $("#UpperCase").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok");
     }
     }
     for (var i = 0; i < regex2.length; i++) {
     if (new RegExp(regex2[i]).test($(this).val())) {
      $("#LowerCase").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok");
     }
     }
    for (var i = 0; i < regex3.length; i++) {
    if (new RegExp(regex3[i]).test($(this).val())) {
     $("#Numbers").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok");
     }
     }
     for (var i = 0; i < regex4.length; i++) {
     if (new RegExp(regex4[i]).test($(this).val())) {
     $("#Symbols").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok");
     }
      }
     });
     }

function DeletePassword() {
 $("#NewPassword").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.
     var thisVal =$(this).val();

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

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

注意：大寫、小寫、數字、符號是我為使用 glyphicon 刪除圖標的標簽指定的 Id 名稱。 如果我的代碼不能完全工作意味着我的問題可能會重復。 但它部分工作，所以請讓我知道我的代碼是否有任何錯誤。

提前致謝

Answer 1

我們可以大大簡化您的代碼。

首先，我們將使用 jQuery 的.on來綁定事件，而不是使用內聯事件處理程序。

接下來，我們會將您的規則合並到一個帶有規則目標的 JSON 對象數組中。

然后我們根據需要迭代基於正則表達式的規則添加和刪除類

 /*Actual validation function*/ function ValidatePassword() { /*Array of rules and the information target*/ var rules = [{ Pattern: "[AZ]", Target: "UpperCase" }, { Pattern: "[az]", Target: "LowerCase" }, { Pattern: "[0-9]", Target: "Numbers" }, { Pattern: "[!@@#$%^&*]", Target: "Symbols" } ]; //Just grab the password once var password = $(this).val(); /*Length Check, add and remove class could be chained*/ /*I've left them seperate here so you can see what is going on */ /*Note the Ternary operators ? : to select the classes*/ $("#Length").removeClass(password.length > 6 ? "glyphicon-remove" : "glyphicon-ok"); $("#Length").addClass(password.length > 6 ? "glyphicon-ok" : "glyphicon-remove"); /*Iterate our remaining rules. The logic is the same as for Length*/ for (var i = 0; i < rules.length; i++) { $("#" + rules[i].Target).removeClass(new RegExp(rules[i].Pattern).test(password) ? "glyphicon-remove" : "glyphicon-ok"); $("#" + rules[i].Target).addClass(new RegExp(rules[i].Pattern).test(password) ? "glyphicon-ok" : "glyphicon-remove"); } } /*Bind our event to key up for the field. It doesn't matter if it's delete or not*/ $(document).ready(function() { $("#NewPassword").on('keyup', ValidatePassword) });

 .glyphicon-remove { color: red; } .glyphicon-ok { color: green; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="form-group has-feedback"> <input class="form-control" id="NewPassword" placeholder="New Password" type="password"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div id="Length" class="glyphicon glyphicon-remove">Must be at least 7 charcters</div> <div id="UpperCase" class="glyphicon glyphicon-remove">Must have atleast 1 upper case character</div> <div id="LowerCase" class="glyphicon glyphicon-remove">Must have atleast 1 lower case character</div> <div id="Numbers" class="glyphicon glyphicon-remove">Must have atleast 1 numeric character</div> <div id="Symbols" class="glyphicon glyphicon-remove">Must have atleast 1 special character</div>

Answer 2

我給你簡單的例子。

html

<!DOCTYPE HTML>
<html>
<head>
<title>Password strength checker in jQuery</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><!-- jQuery Library-->
<link rel="stylesheet" href="css/passwordscheck.css" /><!-- Include Your CSS file here-->
<script src="js/passwordscheck.js"></script><!-- Include Your jQUery file here-->
</head>
<body>
<div id="container">
<div id="header">
<h2>Password Strength Checking with jQuery</h2>
<hr>
</div>
<div id="content">
<form id="register">
<label for="password"><b>Password : </b></label>
<input name="password" id="password" type="password" placeholder="Type Your Password here"/>&nbsp;&nbsp;
<span id="result"></span>
</form>
</div>
</div>
</body>
</html>

JS

$(document).ready(function() {
$('#password').keyup(function() {
$('#result').html(checkStrength($('#password').val()))
})
function checkStrength(password) {
var strength = 0
if (password.length < 6) {
$('#result').removeClass()
$('#result').addClass('short')
return 'Too short'
}
if (password.length > 7) strength += 1
// If password contains both lower and uppercase characters, increase strength value.
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
// If it has numbers and characters, increase strength value.
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
// If it has one special character, increase strength value.
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
// If it has two special characters, increase strength value.
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
// Calculated strength value, we can return messages
// If value is less than 2
if (strength < 2) {
$('#result').removeClass()
$('#result').addClass('weak')
return 'Weak'
} else if (strength == 2) {
$('#result').removeClass()
$('#result').addClass('good')
return 'Good'
} else {
$('#result').removeClass()
$('#result').addClass('strong')
return 'Strong'
}
}
});

參考：鏈接最適合您的示例之一，希望您能理解。