Bootstrap表单验证需手动添加is-valid/is-invalid类并紧邻放置valid-feedback/invalid-feedback元素，配合novalidate属性与JavaScript校验逻辑（如blur或submit事件中调用checkValidity()）触发提示；结构错误、缺少aria-describedby或未清除旧状态是常见失效原因。
Bootstrap 表单验证类怎么触发提示
Bootstrap 本身不自动触发验证提示，is-invalid、is-valid 这些类只是视觉样式，必须手动添加到元素上，或配合 JS 控制。没 JS 驱动时，加了也白加。
常见错误现象：form-control 上写了 is-invalid，但红边框和反馈文字不显示——大概率是漏了 invalid-feedback 元素，或它没和控件放在同一 form-group（或 mb-3）容器里。
-
invalid-feedback必须和对应表单控件在同一个父容器内（推荐用div class="mb-3"包裹） - 控件需有
aria-describedby指向反馈元素的id，否则屏幕阅读器无法关联 - Bootstrap 5+ 不再依赖
form-group类，用mb-3或form-floating等布局类替代
如何让 is-invalid 和 invalid-feedback 一起生效
关键不是“加类”，而是结构 + 属性匹配。下面是最小可运行结构：
<div class="mb-3"> <label for="email" class="form-label">邮箱</label> <input type="email" class="form-control is-invalid" id="email" aria-describedby="email-error"><div id="email-error" class="invalid-feedback">请输入有效的邮箱地址</div> </div>
注意三点：
-
is-invalid加在input上，不是父容器 -
invalid-feedback的id（这里是email-error）必须和aria-describedby值一致 - 如果用了
form-floating，invalid-feedback要放在form-floating容器内部，且不能被form-control的定位遮挡
JS 手动控制验证状态的典型写法
Bootstrap 不提供内置校验逻辑，你得自己判断，然后增删类、显隐反馈。例如监听 blur 后检查邮箱格式：
document.getElementById('email').addEventListener('blur', function() {
const input = this;
const feedback = document.getElementById('email-error');
const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value);
input.classList.toggle('is-invalid', !isValid);
input.classList.toggle('is-valid', isValid);
feedback.style.display = isValid ? 'none' : 'block';
});
这里容易踩的坑：
- 别只用
classList.add('is-invalid')，不移除旧状态会导致多次 blur 后类堆积 -
is-valid和is-invalid互斥，不能共存；同时存在时，is-invalid样式优先级更高 - 用
style.display控制显隐比用classList切换d-none更直接，避免 CSS 冲突
为什么用 setCustomValidity() 配合 Bootstrap 会失效
浏览器原生 setCustomValidity() 触发的 :invalid 伪类，不会自动激活 Bootstrap 的 is-invalid。两者完全独立。
也就是说：调了 input.setCustomValidity('xxx')，再调 input.reportValidity()，只会弹原生提示框，is-invalid 不会自动加上，invalid-feedback 也不会显示。
- 若想统一行为，必须监听
invalid事件，在里面手动加类、显反馈 - 或者放弃原生校验，全程用 JS 自定义判断（更可控，推荐）
- Bootstrap 官方示例里所有验证都是手动 JS 控制，没依赖原生 validity API
真正难的不是加类，而是把校验时机、状态同步、用户交互反馈这三件事串成一条不卡顿、不误导、不遗漏的链路。多数人卡在“以为加了类就完事了”。
