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

【问题标题】：How to enable and disable a submit button based on if passwords are matching?如何根据密码是否匹配启用和禁用提交按钮？
【发布时间】：2017-12-02 03:45:03
【问题描述】：

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

我曾尝试查看此帖子 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>

【问题讨论】：

标签： javascript jquery forms

【解决方案1】：

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

因为您使用的是$('submit') 而不是$('#submit')。您错误地使用了submit，就好像它是按钮的tagname 而不是id。
因为，if 语句的 else 部分（重新启用按钮的代码所在的位置）没有大括号 {}，因此只执行第一条指令。第二个被认为在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 后面只有一条指令，而您有两条。

【讨论】：

感谢您提供此解决方案！不幸的是，在按下刷新后，脚本看不到表单字段的差异，即使字段不匹配，我也可以提交表单。如果字段不匹配，是否有办法在重新加载后保留“不匹配”状态？
您可以在文档的load 事件期间简单地重新运行事件处理程序。
这是我不知道该怎么做的事情，但至少会知道现在该往哪个方向看。

【解决方案2】：

我实际上发现它并不总是有效。因此，我在脚本中添加了一个 return false。

$('#user_password, #user_password_retype').on('keyup', function () {
  if ($('#user_password').val() == $('#user_password_retype').val()) {
     $('#message').html('Matching').css('color', 'green');
     $("#savebutton").prop('disabled', false);
     return true;
  } else 
     $('#message').html('Not Matching').css('color', 'red');
     $("#savebutton").prop('disabled',true);
     return false;
  });

【讨论】：