Question

所以我忙于这个系统，其中包括用户注册。现在我需要jQuery来检查密码和密码确认是否匹配。这就是我想出来的：

$("#pass2").keypress(function() {
  if ($("#pass1").val() != $("#pass2").val()) {
    $(".nosamepass").fadeIn('slow');
    $("#choosepass > input").css("border", "5px solid #ff0033");
  } else {
    $(".nosamepass").fadeOut('slow');
    $("#choosepass > input").css("border", "5px solid #232323");
  }
});

.nosamepass {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="choosePass">
  <h1>{{goodgoing}}<span id="name2"></span></h1>
  <h2>{{choosepassword}}</h2>
  <h3>{{almostthere}}</h3>

  <input name="pass1" id="pass1" type="password" class="password" placeholder="{{password}}">
  <input name="pass2" id="pass2" type="password" class="password" placeholder="{{password2}}">

  <div class="nosamepass">TEST</div>
  <button id="regme" disabled="disabled">{{finishregister}} ></button>
</div>

但由于某种原因，这不起作用。当我键入2个相同的密码时，它会显示.nosamepass。当密码不同时，它也会显示。当我第一次与它们不匹配时它也不会消失，然后纠正它。

.nosamepass通过外部CSS文件隐藏。

如何解决这个问题？

修改

我刚刚发现，当我在两个输入字段中加上'a'时，它表示它们不相同。当我在#pass2（第二个输入字段）中输入第二个字符时，它表示它们是相似的。但他们不是。

Answer 1

TJ Crowder已经给出了正确的解释，但我认为将听众变为＆＃39; keyup＆＃39;

更有意义。

＆＃13;

$("#pass2").keyup(function() {
  if ($("#pass1").val() != $("#pass2").val()) {
    $(".nosamepass").fadeIn('slow');
    $("#choosepass > input").css("border", "5px solid #ff0033");
  } else {
    $(".nosamepass").fadeOut('slow');
    $("#choosepass > input").css("border", "5px solid #232323");
  }
});

＆＃13;

.nosamepass {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="choosePass">
  <input name="pass1" id="pass1" type="password" class="password" placeholder="{{password}}">
  <input name="pass2" id="pass2" type="password" class="password" placeholder="{{password2}}">

  <div class="nosamepass">Passwords Don't Match</div>
</div>

＆＃13;

Answer 2

问题是当keypress运行时，input的值尚未更新（因为您可能会阻止默认操作，即更新输入的值）。 / p>

您可以使用setTimeout(..., 0)技巧在事件完成后调用您的代码：

$("#pass2").keypress(function() {
  setTimeout(function() {
    if ($("#pass1").val() != $("#pass2").val()) {
      $(".nosamepass").fadeIn('slow');
      $("#choosepass > input").css("border", "5px solid #ff0033");
    } else {
      $(".nosamepass").fadeOut('slow');
      $("#choosepass > input").css("border", "5px solid #232323");
    }
  }, 0);
});

<div id="choosePass">
  <h1>{{goodgoing}}<span id="name2"></span></h1>
  <h2>{{choosepassword}}</h2>
  <h3>{{almostthere}}</h3>
  <input name="pass1" id="pass1" type="password" class="password" placeholder="{{password}}">
  <input name="pass2" id="pass2" type="password" class="password" placeholder="{{password2}}">
  <div class="nosamepass">TEST</div>
  <button id="regme" disabled="disabled">{{finishregister}} ></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jQuery检查两个密码是否匹配

2 个答案: