javascript - 如何根据密码是否匹配启用和禁用提交按钮？

Question

我正在创建一个表单，用户将在其中注册一个网站，该表单中有两个输入字段可帮助确认用户密码。我试图在密码不匹配时禁用提交按钮，然后在密码匹配时重新启用它。我目前有禁用部分在工作，但我无法重新启用它。

我试过看这篇文章how to check confirm password field in form without reloading page但我想不出除了我目前拥有的之外我还需要做什么。

代码:

<form id="myform" action="process_registration.php" class="basic-grey" method="post">
  <div>
    <label for="firstName" id="firstName">* First Name:</label>
    <input type="text" name="firstName" id="firstName" minlength=1 required />
  </div>

  <div>
    <label for="lastName" id="lastName">* Last Name:</label>
    <input type="text" name="lastName" id="lastName" minlength=1 required />
  </div>

  <div>
    <label for="email" id="email">* Email:</label>
    <input type="email" name="email" id="email" minlength=1 required />
  </div>

  <div>
    <label for="username" id="usernameLabel">* Username:</label>
    <input type="text" name="username" id="username" minlength=1 required />
  </div>

  <div>
    <label for="password" id="passwordLabel">* Password:</label>
    <input type="password" name="password" id="password" minlength=1 required />
  </div>

  <div>
    <label for="passwordConfirm" id="passwordLabelConfirm">* Password Confirmation:</label>
    <input type="password" name="passwordConfirm" id="passwordConfirm" minlength=1 required />
    <span id="message"></span>
  </div>

  <div>
    <input id="submit" type="submit" name="submit" value="Submit" />
  </div>

</form>

<?php include ABSOLUTE_PATH . '_includes/footer.inc.php'; ?>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<script src='https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js'></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script>
  $('form').validate();
</script>

<script>
  $('#password, #passwordConfirm').on('keyup', function() {
    if ($('#password').val() == $('#passwordConfirm').val()) {
      $('#message').html('Matching').css('color', 'green');
      $('submit').prop('disabled', false);
    } else
      $('#message').html('Not Matching').css('color', 'red');
    $('submit').prop('disabled', true);
  });
</script>

Answer 1

您的代码不起作用有两个原因:

1. 因为您正在使用 $('submit')而不是 $('#submit') .您错误地使用了 submit就好像它是 tagname而不是 id按钮。

2. 因为，else你的一部分 if声明，重新启用按钮的代码所在的位置没有大括号 {}因此只执行第一条指令。第二个被认为在 if 之外语句并且它总是最后执行，从而使按钮永久禁用。

片段:
_{(只保留演示必需的代码)}

/* --- JavaScript --- */
$('form').validate();

$('#password, #passwordConfirm').on('keyup', function() {
  if ($('#password').val() == $('#passwordConfirm').val()) {
    $('#message').html('Matching').css('color', 'green');
    $('#submit').prop('disabled', false);
  } else {
    $('#message').html('Not Matching').css('color', 'red');
    $('#submit').prop('disabled', true);
  }
});

<!--- HTML --->
<form id="myform" action="process_registration.php" class="basic-grey" method="post">
  <div>
    <label for="password" id="passwordLabel">* Password:</label>
    <input type="password" name="password" id="password" minlength=1 required />
  </div>
  <div>
    <label for="passwordConfirm" id="passwordLabelConfirm">*
      Password Confirmation:</label>
    <input type="password" name="passwordConfirm" id="passwordConfirm"
      minlength=1 required />
    <span id="message"></span>
  </div>
  <div>
    <input id="submit" type="submit" name="submit" value="Submit" />
  </div>
</form>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<script src='//cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js'>
</script>
<script src="//cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js">
</script>

---

注意: 在您链接的问题的答案中，代码有效，因为 else 之后只有一条指令。 ，而你有两个。