需手动在表单控件（input/select/textarea）上添加 is-valid 或 is-invalid 类，并紧邻放置 valid-feedback 或 invalid-feedback 元素作为下一个兄弟节点，配合 blur 或 submit 事件触发验证逻辑。
怎么给 Bootstrap 表单控件加 is-valid 或 is-invalid
bootstrap 本身不自动验证，它只提供视觉反馈的 css 类。你得自己判断字段是否合法，再手动加类。
常见错误是直接写 <input class="form-control is-valid">，结果页面一加载就显示对勾，但用户还没输——这会让用户困惑，也违背“验证应在提交或失焦后触发”的交互直觉。
- 验证时机建议用
blur（失焦）或submit事件，别用input实时校验，除非业务强要求 -
is-valid和is-invalid必须加在<input>、<select></select>或<textarea></textarea>上，不是加在包裹它的<div class="form-group"> <li>配套的提示文字要放在 <code><div class="valid-feedback"> 或 <code><div class="invalid-feedback"> 里，且必须和控件同级、紧邻 <h3>为什么 <code>valid-feedback不显示？两个最常踩的坑：一是没加
display: block的触发条件，二是 HTML 结构不对。Bootstrap 要求：
.valid-feedback和.invalid-feedback默认是display: none，只有当对应控件同时拥有is-valid或is-invalid类时，它们才显示。但前提是——它们必须是控件的**下一个兄弟元素**。- ❌ 错误结构：
<div class="form-group"> <input><div class="invalid-feedback">...</div> </div>（中间隔了父容器） - ✅ 正确结构：
<input class="form-control is-invalid"><div class="invalid-feedback">邮箱格式不对</div> - 如果用了
floating-label（form-floating），反馈元素仍需紧跟在<input>后，不能塞进<label></label>里
setCustomValidity()和 Bootstrap 验证状态能一起用吗？能，但要注意冲突。原生
setCustomValidity()会影响:valid/:invalid伪类，而 Bootstrap 的is-valid/is-invalid是纯 class 控制，二者互不感知。典型问题：你调了
input.setCustomValidity("必填")，然后又手动加is-invalid，结果浏览器原生 tooltip 和 Bootstrap 提示同时出现，体验割裂。- 推荐统一走 JS 手动控制：清空原生验证
input.setCustomValidity("")，完全由你控制is-valid/is-invalid和反馈文案 - 如果想保留原生约束（如
required、type="email"），可在submit时检查input.checkValidity()，根据返回值设 class，而不是依赖伪类自动触发 -
checkValidity()返回false时，input.validationMessage是浏览器默认提示，一般不如你自己写的invalid-feedback清晰，建议忽略它
用 jQuery 操作时，
addClass("is-invalid")没反应？大概率是 DOM 还没加载完就执行了 JS，或者选择器没选中目标元素。
Bootstrap 的表单样式依赖完整的 class 链，比如
form-control必须存在，否则is-invalid的边框变色可能不生效。- 确保 jQuery 代码放在
- ❌ 错误结构：
