Bootstrap模态框中密码匹配时启用提交按钮的实现求助

问题核心需求 #

实现注册表单的密码校验：当密码与确认密码均不为空且内容匹配时启用提交按钮；任意条件不满足（为空/不匹配）时禁用按钮，再次不匹配时重新禁用。

现有代码的问题 #

1. 脚本未封装成check()函数，但HTML里绑定了onkeyup='check();'事件，导致触发时无对应函数执行
2. 两个独立的if语句逻辑冲突，第二个if会覆盖第一个的判断结果（比如密码为空时，第二个if的else会错误启用按钮）
3. 提交按钮被<a>标签包裹，即使按钮禁用，点击<a>仍会直接跳转，完全绕过了禁用逻辑

修正后的完整代码 #

HTML部分

<!-- 新增form标签，确保表单提交逻辑正常 -->
<form action="signup.php" method="post">
  <label for="signupModalPassword">Password</label>
  <input type="password" class="form-control" name="password" id="signupModalPassword" required="required" onkeyup='check();'>
  <p></p>
  <label for="signupModalPwCheck">Re-type Password</label>
  <input type="password" class="form-control" id="signupModalPwCheck" name="password2" required="required" onkeyup='check();'>
  <span id='message'></span>
  <p></p>

  <div class="form-group">
    <!-- 移除包裹的a标签，默认设置disabled状态 -->
    <button type="submit" id="signupbtn" class="btn btn-lg btn-block login-btn" style="background-color: #fdbf50 !important; color: white !important;" disabled>Join Now!</button>
  </div>
</form>

JavaScript部分

// 封装成check函数，对应HTML的onkeyup事件
function check() {
  // 缓存DOM元素，避免重复查询
  const passwordInput = document.getElementById('signupModalPassword');
  const confirmInput = document.getElementById('signupModalPwCheck');
  const submitBtn = document.getElementById('signupbtn');
  const messageEl = document.getElementById('message');

  const password = passwordInput.value.trim();
  const confirmPwd = confirmInput.value.trim();

  // 核心判断逻辑：两个输入都不为空，且内容完全匹配
  if (password && confirmPwd && password === confirmPwd) {
    submitBtn.disabled = false;
    messageEl.textContent = '密码匹配';
    messageEl.style.color = 'green';
  } else {
    submitBtn.disabled = true;
    // 根据不同情况显示提示
    if (confirmPwd && password !== confirmPwd) {
      messageEl.textContent = '密码不匹配';
      messageEl.style.color = 'red';
    } else {
      messageEl.textContent = '';
    }
  }
}

关键说明 #

1. 移除<a>标签：submit按钮放在<form>内，通过action属性指定提交地址，避免点击a标签绕过禁用逻辑
2. 默认禁用按钮：初始状态设置disabled，确保用户未输入时无法提交
3. 合并判断逻辑：用一个if同时校验「非空」和「匹配」两个条件，避免逻辑冲突
4. 添加状态提示：给用户实时反馈密码匹配状态，提升体验
5. 使用trim()：去除输入内容两端空格，避免因误输入空格导致的匹配失败

内容的提问来源于stack exchange，提问作者dansyw91