如何禁用Bootstrap 5指定输入框校验及修复确认密码红框不显示问题

数据老陈

2026-9-29

问题原因

Bootstrap 5的表单校验是基于HTML5原生校验规则实现的，你单独写的jQuery密码比对逻辑仅阻止了表单提交，没有修改确认密码输入框的原生校验状态，所以只要确认密码输入框满足必填、最小长度6位的规则，Bootstrap就会判定它为合法状态，显示绿色边框。

解决方法

不需要保留原有的jQuery提交时密码比对逻辑，新增两个密码框的输入事件监听，通过HTML5原生的setCustomValidity方法控制确认密码框的校验状态即可，修改后的完整校验代码如下：

$(document).ready(function(){
  // 监听密码输入事件，实时校验两次密码是否匹配
  $('#pw1, #pw2').on('input', function() {
    const pw1Val = $('#pw1').val();
    const pw2Val = $('#pw2').val();
    // 只有确认密码框有输入时才触发匹配校验
    if (pw2Val.length > 0) {
      if (pw1Val !== pw2Val) {
        // 设置自定义错误，Bootstrap会识别为校验失败，自动显示红色边框和错误提示
        $('#pw2')[0].setCustomValidity('两次输入的密码不一致');
      } else {
        // 清空自定义错误，识别为校验成功
        $('#pw2')[0].setCustomValidity('');
      }
    }
  });

  // 原有Bootstrap 5原生校验逻辑保持不变即可
  (function () {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms)
      .forEach(function (form) {
        form.addEventListener('submit', function (event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
  })()
})