如何使用jQuery/JavaScript动态检查密码是否有效?

3

在将我的问题标记为重复之前,请仔细阅读我的问题。

嗨,我尝试在按键时动态验证密码。 实际上,在输入密码时它对我起作用。 但是当我删除密码时,只有两个条件满足。 我的代码和图像如下:

我的密码框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。

这些是我的密码条件和图标: enter image description here

假设我的密码为Password@123,它包含了我需要的所有内容,所以所有图标都变成了ok。 enter image description here

但是当我删除密码时,只有2个条件被满足。 enter image description here

以下是该函数的代码:

 <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>

注意:UpperCase,LowerCase,Numbers,Symbols是我给使用glyphicon remove图标的标签分配的ID名称。 如果我的代码没有完全起作用,那么我的问题可能会被视为重复问题。但是它部分地起作用,所以请告诉我是否有任何错误。 先行致谢。

在你的输入框中,你已经定义了DeletePassword()函数来处理onkeydown事件,那么为什么在函数内部又调用了keyup?因为它已经在keydown事件中被调用,所以不需要再次调用keyup,除非有特殊需要。同样的情况也适用于EnterPassword()函数。 - vikscool
你在keydown事件中涉及了keyup事件。我看不出使用arrayloop的可行性。简单的if语句就可以完成任务。尽可能避免使用inline event handlers - ths
@ths,@vikscool:从你们的评论中我了解到,在HTML代码中将keydownkeypress事件分配给了函数,因此在函数内部不需要使用keyup。但是,一旦我删除了删除和输入函数内的keyup函数,事情就无法正常工作(即使是输入密码)。 - Riya
你的控制台有任何错误吗? - ths
到目前为止,我的代码没有任何错误。在运行上述代码时,输入密码正常工作。在删除密码时,我希望图标从正确变为错误,但只有5个条件中的2个满足并更改了图标。 - Riya
2个回答

6
我们可以大大简化你的代码。
首先,我们将使用 jQuery 的 .on 来绑定事件,而不是使用内联事件处理程序。
接下来,我们将把您的规则合并到一个带有规则目标的 JSON 对象数组中。
然后,我们遍历基于正则表达式的规则,根据需要添加和删除类。

/*Actual validation function*/
function ValidatePassword() {
  /*Array of rules and the information target*/
  var rules = [{
      Pattern: "[A-Z]",
      Target: "UpperCase"
    },
    {
      Pattern: "[a-z]",
      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>


哇哦...你的工作真棒..非常感谢..我已经有了CSS和HTML代码,现在我使用了你的函数..我很快会浏览目标、模式..这个目标模式的主要用途是什么? - Riya
目标是将要更新的 div,模式是用于检查密码是否符合复杂性规则的 regex 模式。rules 只是这些对象的数组。这里有一些关于对象的快速信息 - Jon P
我使用了你提供的方法,现在它可以正常工作。但同时我想知道我的代码哪里出了问题?你能帮我找一下吗?因为它只能部分正常工作,所以我需要求助。 - Riya
我没有深入研究它。一个引人注目的问题是.test(!thisVal)。这是不起作用的。你需要做的是if (!(new RegExp(regex4[i]).test(thisVal)))。你需要否定测试结果,而不是被测试的值。 - Jon P
非常感谢您再次的帮助。如果我按照您上面的评论更改我的代码,它就可以工作了。但是我将其作为备选方案,并且目前正在使用您的目标模式方法。再次感谢您。 - Riya

1
我给你一个简单的例子。

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

参考: 链接 这是一个很好的例子,希望你能理解。


1
谢谢你的回复和提供的链接。但是我已经使用了这种方法来比较两个密码。我想要一些关于更改图标的确切答案。现在我已经得到了答案。再次感谢你。 - Riya

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接