能否使用Bootstrap 4默认验证功能实现密码确认校验？

嘿，我懂你作为前端新手找这个方案的迷茫，其实Bootstrap 4自带的表单验证完全能搞定密码确认的客户端校验，咱们一步步来实现：

第一步：完善你的注册模态框表单结构 #

你只提供了模态框的触发按钮，首先得把模态框里的表单补全，要用到Bootstrap的表单类和HTML5的验证属性：

<!-- 注册模态框 -->
<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="signUpLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="signUpLabel">Sign Up</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 核心：添加needs-validation类和novalidate属性 -->
        <form class="needs-validation" novalidate>
          <!-- 密码输入框 -->
          <div class="form-group mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" required>
            <div class="invalid-feedback">请输入密码</div>
          </div>
          <!-- 确认密码输入框 -->
          <div class="form-group mb-3">
            <label for="confirmPassword" class="form-label">Confirm Password</label>
            <input type="password" class="form-control" id="confirmPassword" required>
            <div class="invalid-feedback">两次输入的密码不匹配</div>
          </div>
          <!-- 你可以在这里添加其他注册字段，比如用户名、邮箱 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Sign Up</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

第二步：添加验证逻辑的JavaScript #

Bootstrap 4的表单验证需要配合JS来触发，我们还要自定义密码匹配的校验规则：

// 页面加载完成后执行验证逻辑
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // 获取需要验证的表单
    const form = document.querySelector('.needs-validation');
    
    // 监听表单提交事件
    form.addEventListener('submit', function(e) {
      const password = document.getElementById('password');
      const confirmPassword = document.getElementById('confirmPassword');
      
      // 检查密码是否匹配
      if (password.value !== confirmPassword.value) {
        confirmPassword.setCustomValidity('两次输入的密码不匹配');
      } else {
        confirmPassword.setCustomValidity('');
      }
      
      // 如果表单验证不通过，阻止提交
      if (!form.checkValidity()) {
        e.preventDefault();
        e.stopPropagation();
      }
      
      // 添加was-validated类，让Bootstrap显示验证样式
      form.classList.add('was-validated');
    }, false);
    
    // 可选：实时校验密码匹配（用户输入时就提示）
    document.getElementById('confirmPassword').addEventListener('input', function() {
      const password = document.getElementById('password');
      const confirmPassword = this;
      
      if (password.value !== confirmPassword.value) {
        confirmPassword.setCustomValidity('两次输入的密码不匹配');
      } else {
        confirmPassword.setCustomValidity('');
      }
      
      // 实时更新验证样式
      confirmPassword.classList.toggle('is-invalid', !confirmPassword.checkValidity());
      confirmPassword.classList.toggle('is-valid', confirmPassword.checkValidity() && confirmPassword.value !== '');
    });
  }, false);
})();

关键知识点解释 #

• needs-validation：Bootstrap用于标记需要验证的表单类
• novalidate：禁用浏览器默认的原生验证提示，改用Bootstrap的样式
• required：HTML5属性，确保用户必须填写该字段
• setCustomValidity()：自定义验证错误信息，密码不匹配时设置提示，匹配时清空
• was-validated：添加这个类后，Bootstrap会根据字段的验证状态显示绿色（成功）或红色（失败）样式

这样设置后，用户提交表单时会先校验密码是否匹配，不匹配的话会显示你设置的错误提示，完全用Bootstrap 4的默认验证体系实现，不用额外引入其他插件~

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