Question

我有一个密码验证器代码，我上网了，我调整它以满足我的需求，唯一的问题是它有一些问题。

我的HTML代码：

<form id="fleft">
<input type="password" name="Password" id="box1" /><span id="msg_out1"></span>

</form>

我的jquery代码：

  jQuery('#box1').keyup(function(){
    jQuery('#msg_out1').html(checkStrength(jQuery('#box1').val()))
}) 

function checkStrength(Password){

var strength = 0

if (Password.length < 6) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('notenough')
    jQuery('#msg_out1').html('&#10008; at least 6 characters.');

  }

if (Password.length > 7) strength += 1

if (Password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1

if (Password.match(/([a-zA-Z])/) && Password.match(/([0-9])/))  strength += 1

if (Password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1

if (Password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,",%,&,@,#,$,^,*,?,_,~])/)) strength   += 1

if (strength <= 2 ) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('notsecure')
     jQuery( "#msg_out1" ).html('&#10004; Password not secure!');
} else if (strength == 2 ) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('moresecure')
    jQuery( "#msg_out1" ).html('&#10004; Password is good, could be more secure!');
} else {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('secure')
    jQuery( "#msg_out1" ).html('&#10004; Password is secure!');
}

}

我的css：

  #fleft.notenough{
   color:red;
font-size:15px;
margin-left:40px;
font-family:"Helvetica Neue", Helvetica, sans-serif;

}

#fleft.notsecure{
color:rgb(255, 109, 36);
font-size:15px;
margin-left:40px;
font-family:"Helvetica Neue", Helvetica, sans-serif;
}

 #fleft.moresecure{
color:#F6FF00;
font-size:15px;
margin-left:40px;
font-family:"Helvetica Neue", Helvetica, sans-serif;
}

#fleft.secure{
color:green;
font-size:15px;
margin-left:40px;
font-family:"Helvetica Neue", Helvetica, sans-serif;

}

我理解代码是如何工作的，事情是当用户输入1个字符时#msg_out1显示密码不安全哪个错误，它应该是“至少6个字符”显示，也没有我指定的类显示。我要求专业人士看看这个并告诉我哪里出错了。

Answer 1

长度检查失败后，您无法停止检查。设置第一条错误消息，然后代码继续并查找其他错误，每次都覆盖该消息。

您想在发现问题后返回，例如

if (Password.length < 6) {
  jQuery('#msg_out1').
    removeClass().
    addClass('notenough').
    html('&#10008; at least 6 characters.');

  return;
}

Answer 2

mmm问题是调整

阅读我在下面的代码中添加的评论

if (Password.length < 6) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('notenough')
    jQuery('#msg_out1').html('&#10008; at least 6 characters.');

  } 


// *** you are replacing the #msg_out1 id with '&#10008; at least 6 characters.';***

if (Password.length > 7) strength += 1

if (Password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1

if (Password.match(/([a-zA-Z])/) && Password.match(/([0-9])/))  strength += 1

if (Password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1

if (Password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,",%,&,@,#,$,^,*,?,_,~])/)) strength   += 1

if (strength <= 2 ) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('notsecure')
     jQuery( "#msg_out1" ).html('&#10004; Password not secure!'); 

// *** you are overriding the previous #msg_out1 id '&#10008; at least 6 characters.';
//with the new message '&#10004; Password not secure!'

} else if (strength == 2 ) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('moresecure')
    jQuery( "#msg_out1" ).html('&#10004; Password is good, could be more secure!');
} else {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('secure')
    jQuery( "#msg_out1" ).html('&#10004; Password is secure!');
}

<强>解决方案：

你可以做的是：

if (Password.length < 6) {
        jQuery('#msg_out1').removeClass()
        jQuery('#msg_out1').addClass('notenough')
        jQuery('#msg_out1').html('&#10008; at least 6 characters.');
    return ;
      }

或append（）方法，而不是html（），如果您希望应用程序一起显示这两个消息

if (strength <= 2 ) {
    jQuery('#msg_out1').removeClass()
    jQuery('#msg_out1').addClass('notsecure')
     jQuery( "#msg_out1" ).append('&#10004; Password not secure!');
}

祝你好运

Answer 3

我找到了一种方法让我的课程显示：

 if (Password.length < 6) {
    jQuery('#msg_out4').removeClass()
    jQuery('#msg_out4').html('&#10008; at least 6 characters.').css('color','red').css('font-size','15px').css('margin-left','40px').css('font-family','"Helvetica Neue", Helvetica, sans-serif');
    return ;

如何让我的密码验证工作？

3 个答案: