Question

密码和电子邮件验证，首先看它工作正常，但如果你开始玩密码，你会看到那里有什么问题。

所以我的密码验证非常简单，如果它的有效我将类添加到输入valid使边框变为绿色，如果它无效，则会添加一个类invalid，使边框变为红色。

对于每个输入（username，password，repassword，email）的效果都相同，正如我之前提到的那样，一切正常，但不是因为密码和repassword被窃听，我不明白为什么。

这是我的代码：

  $(document).ready(function() {
    $('input[name*="password"]').keyup(function() {
      var password = $('input[name="password"]').val();
      var repassword = $('input[name="repassword"]').val();
      var isValid = /^[a-zA-Z0-9]*$/.test(password);
      var length = password.length;
      if (isValid && (length > 4) && (length < 16)) {
        if (password == repassword) {
          $('input[name="password"]').attr('class', 'valid');
          $('input[name="repassword"]').attr('class', 'valid');
        } else {
          $('input[name="repassword"]').attr('class', 'invalid');
        }
        if (password == "") {
          $('input[name="password"]').attr('class', 'invalid');
          $('input[name="repassword"]').attr('class', 'invalid');
        } else {
          $('input[name="password"]').attr('class', 'valid');
        }
      } else {
        $('input[name="password"]').attr('class', 'invalid');
        $('input[name="repassword"]').attr('class', 'invalid');
      }
    });
    $('#username').on('input', function() {
      $("#username").removeClass();
      var username = $(this).val();
      var isValid = /^[a-zA-Z0-9]*$/.test(username);
      var length = username.length;
      if (isValid && (length > 4) && (length < 16)) {
        $("#username").addClass("valid");
      } else {
        $("#username").addClass("invalid");
      }
    });
    $('#email').on('input', function() {
      $("#email").removeClass();
      var username = $(this).val();
      var isValid = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(username);
      if (isValid) {
        $("#email").addClass("valid");
      } else {
        $("#email").addClass("invalid");
      }
    });


    $("#regdetails input").on('input', function() {
      if ($("#regdetails input:not(#loginsubmitbutton2)").length === $("#regdetails input.valid").length) {
        $("#loginsubmitbutton2").show();
      } else {
        $("#loginsubmitbutton2").hide();
      }
    });
  });

regdetails {
  width: 300px;
}
.valid {
  border: 1px solid rgba(0, 255, 0, 1);
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 255, 0, 1);
  -moz-box-shadow: 0px 0px 5px 1px rgba(0, 255, 0, 1);
  box-shadow: 0px 0px 5px 0.5px rgba(0, 255, 0, 1);
}
.invalid {
  border: 1px solid rgba(255, 0, 0, 1);
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(255, 0, 0, 1);
  -moz-box-shadow: 0px 0px 5px 1px rgba(255, 0, 0, 1);
  box-shadow: 0px 0px 5px 0.5px rgba(255, 0, 0, 1);
}
#register2 {
  position: relative;
  top: 60px;
  height: auto;
  ;
  width: 50%;
  margin: 0 auto;
  border-radius: 4px;
  border: 1px solid #1a171a;
  -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.6);
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.6);
  text-align: center;
  margin-bottom: 200px;
}
#loginsubmitbutton2 {
  background-color: #007abc;
  height: 25px;
  width: 150px;
  display: none;
  text-align: center;
  color: #0a3a8e;
  font-size: 15px;
  text-shadow: #ffffff 0 1px 0;
  border: 1px solid #f7ad00;
  background: #f7ad00;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
}
#loginsubmitbutton2:hover {
  border: 1px solid #00519d;
  text-shadow: #2b2e28 0 1px 0;
  background: #00519d;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="register2">
  <p><b>Registration Step (3/3)</b>
  </p>
  <div id="regdetails">
    <b>Fill your details:</b>
    <BR>
    <br>
    <form action="#" method="post">
      Username:
      <br>
      <input id="username" type="text" name="username">
      <br>Password:
      <br>
      <input id="password" type="password" name="password">
      <br>Re-Password:
      <br>
      <input id="repassword" type="password" name="repassword">
      <br>Email:
      <br>
      <input id="email" type="email" name="email">
      <br>
      <br>
      <input id="loginsubmitbutton2" type="submit" name="next" value="Next">
      <br>
      <br>
    </form>

  </div>
</div>

只需以正确的形式填写所有内容，以便每个字段都有效，然后尝试使用密码和repassword字段，只需在其中任何一个字符上添加一个字符，您就会得到我的意思，这个视频会更好地解释一下： https://youtu.be/6uHxXu7eAv4

Answer 1

我通过改变这个来解决这个问题：

$("#regdetails input").on('input', function(){
        if($("#regdetails input:not(#loginsubmitbutton2)").length === $("#regdetails input.valid").length){
            $("#loginsubmitbutton2").show();
        }else{
            $("#loginsubmitbutton2").hide();
        }
    });

进入这个：

$("#regdetails input").on('input keyup', function(){
        if($("#regdetails input:not(#loginsubmitbutton2)").length === $("#regdetails input.valid").length){
            $("#loginsubmitbutton2").show();
        }else{
            $("#loginsubmitbutton2").hide();
        }
    });

我只需更改$（“＃regdetails input”）。on（'input'，function（）以输入keyup

jQuery密码验证失败

1 个答案: