如何使用jquery/javascript动态检查密码验证？

请仔细阅读我的问题，然后将我的问题指定为副本。 嗨，我试图在按键时动态验证密码。实际上，在输入密码时，它对我有效。但是当我删除密码时，只有两个条件满足。我的代码和图片如下：

我的密码框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删除密码的每个条件前面。当我输入密码时，如果条件满足，每个图标将更改为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>

函数EnterPassword（）{
$（“#NewPassword”）.keyup（函数（）{
var regex1=新数组（）；
var regex2=新数组（）；
var regex3=新数组（）；
var regex4=新数组（）；
regex1.push（“[A-Z]”；//大写字母。
regex2.push（“[a-z]”；//小写字母。
regex3.push（“[0-9]”；//位。
regex4.push（“[！@@$%^&*]”；//特殊字符。
如果（$（this.val（）.length>6）{
$（“#长度”）.removeClass（“glyphicon glyphicon remove”）.addClass（“glyphicon glyphicon ok”）；
}
对于（var i=0；iif（$（this）.val（）.length我给你举个简单的例子

Html


jQuery中的密码强度检查器
使用jQuery进行密码强度检查

密码：

JS

$（文档）.ready（函数（）{
$（'#password'）.keyup（函数（）{
$（'#result'）.html（checkStrength（$（'#password'）.val（））
})
函数校验强度（密码）{
var强度=0
如果（密码长度<6）{
$（'#result'）.removeClass（）
$（'#result'）.addClass（'short'））
返回“太短”
}
如果（password.length>7）强度+=1
//如果密码同时包含小写和大写字符，请增加“强度”值。
如果（密码匹配（/（[a-z].[a-z]）|（[a-z].[a-z]）/）强度+=1
//如果有数字和字符，则增加“强度”值。
if（password.match（/（[a-zA-Z]）/）和&password.match（/（[0-9]）/）强度+=1
//如果它有一个特殊字符，增加强度值。
如果（password.match（/（[！，%，&，@，#，$，^，*，？，，~]）/）强度+=1
//如果有两个特殊字符，则增加“强度”值。
如果（password.match（/（.[！，%，&，@，#，$，^，*，？，，~].[！，%，&，@，#，$，^，*，？，，~]）/）强度+=1
//计算强度值，我们可以返回消息
//如果值小于2
如果（强度<2）{
$（'#result'）.removeClass（）
$（'#result'）.addClass（'弱'）
返回“弱”
}否则，如果（强度==2）{
$（'#result'）.removeClass（）
$（'#result'）.addClass（'good'））
返回“好”
}否则{
$（'#result'）.removeClass（）
$（'#result'）.addClass（'strong'））
返回“强”
}
}
});

参考：
这是你最好的例子之一
希望您能理解。
我们可以大大简化您的代码

首先，我们将使用jQuery的
.on
绑定事件，而不是使用内联事件处理程序

接下来，我们将使用规则目标将您的规则整合到JSON对象数组中

然后，我们迭代基于正则表达式的规则，根据需要添加和删除类


/*实际验证功能*/
函数ValidatePassword（）{
/*规则数组和信息目标*/
风险值规则=[{
图案：“[A-Z]”，
目标：“大写”
},
{
图案：“[a-z]”，
目标：“小写”
},
{
模式：“[0-9]”，
目标：“数字”
},
{
模式：“[！@$%^&*]”，
目标：“符号”
}
];
//只需抓取一次密码
var password=$（this.val（）；
/*长度检查，添加和删除类可以链接*/
/*我把它们分开放在这里，让你看看发生了什么*/
/*注意三元运算符？：选择类*/
$（“#长度”）.removeClass（password.Length>6？“glyphicon remove”：“glyphicon ok”）；
$（“#长度”）.addClass（password.Length>6？“glyphicon ok”：“glyphicon remove”）；
/*迭代剩下的规则。逻辑与长度相同*/
对于（var i=0；i<!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>

$(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'
}
}
});