javascript - 将函数添加到具有两个输入字段的 .keyup()

Question

我有一个密码字段和一个密码确认字段。我正在尝试将 keyup 添加到这两个字段，以便每当有人开始输入其中任何一个字段时，我都可以向他们显示密码是否匹配。

我实现了一个有效的版本，但正如您所看到的，它并不理想。

function comparePassword() {
  var password1 = $("#password1").val();
  var password2 = $("#password2").val();

  if (password1 != password2) {
    $(".divDoPasswordsMatch").html("Passwords do not match!");
  }
  else {
    $(".divDoPasswordsMatch").html("Passwords match.");
  }

$("#password1, #password2").keyup(comparePassword);

我不想在comparePassword函数内设置变量password1和password2。这部分是因为我需要多次使用这个函数。我想将这两个输入字段传递到 keyup 中，如下所示:

$("#password1, #password2").keyup(comparePassword($("#password1").val(), $("#password2").val()));

理想情况下，我希望comparePassword知道继承#password1和#password2的值，而无需再次指定:

$("#password1, #password2").keyup(comparePassword(this.value, this.value)); 

最后两个代码示例不起作用。我该怎么写？

提前致谢!

Answer 1

您可以通过这种方式重新排列代码。

//this will be the function that will compare any two different string values
function comparePassword(password1, password2) {
  if (password1 != password2) {
    $(".divDoPasswordsMatch").html("Passwords do not match!");
  }
  else {
    $(".divDoPasswordsMatch").html("Passwords match.");
  }
}
$(document).ready(function(){
$("#password1, #password2").keyup(function(){
  comparePassword($("#password1").val(), $("#password2").val());
});
}
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="password1">
<input type="text" id="password2">
<div class="divDoPasswordsMatch"></div>