需手动在表单控件（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>或<textarea>上，不是加在包裹它的<div class="form-group"> - 配套的提示文字要放在
<div class="valid-feedback">或<div class="invalid-feedback">里，且必须和控件同级、紧邻
为什么 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>里
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 代码放在
</body>前，或包装在$(document).ready(...) - 检查是否误选了父容器：
$(".form-group").addClass("is-invalid")没用，要选控件本身：$("#email").addClass("is-invalid") - 清除旧状态别漏掉：
$("#email").removeClass("is-valid is-invalid")，避免 class 冲突 - 如果用了 Vue/React 等框架，别直接操作 DOM 类，改用响应式数据驱动 class 绑定
真正麻烦的不是加那两个 class，而是验证逻辑的边界情况：空格算不算空、手机号带不带区号、密码强度要不要实时计算……这些没法靠 Bootstrap 解决，得你一条条对齐产品需求。
