必须在标签添加novalidate属性，否则浏览器原生验证弹窗会抢占bootstrap的.invalid-feedback显示；同时需手动调用checkvalidity()并显式切换is-valid/is-invalid类，且.feedback元素须为form-control的紧邻兄弟节点。
novalidate 属性漏了，整个验证就失效
不加 novalidate，浏览器原生弹窗会抢在 .invalid-feedback 之前冒出来，用户看到的是难看的浮层提示，你写的红色边框和下方文字全不显示。这不是样式没写对，是根本没触发 Bootstrap 的验证流程。
必须把 novalidate 写在 <form></form> 标签上，不是某个 <input>；它只是关掉弹窗，不影响 required、type="email" 这些属性的语义，JavaScript 仍能读取和校验。
- 常见错误：表单提交后无任何视觉反馈，控制台也无报错——90% 是这里漏了
-
.needs-validation类只在有novalidate时才真正起作用 - 别用
reportValidity()，它会重新唤出原生弹窗，直接破坏体验
手动切换 is-valid/is-invalid 类才是关键
Bootstrap 不自动监听输入变化，也不根据 setCustomValidity() 自动改样式。你得自己调 input.checkValidity()，再根据返回值显式加/删类。
.valid-feedback 和 .invalid-feedback 必须作为对应 form-control 元素的**紧邻兄弟节点**，不能包在 <div class="mb-3"> 里，也不能隔开空行或注释——否则 CSS 选择器匹配失败，提示不显示。
<ul>
<li>每个控件都要配一个 <code><div class="invalid-feedback">...</div>，文案写死或由 JS 动态更新
blur（失焦）事件里，避免每输一个字都抖动input 事件做实时校验，记得每次输入后清空 setCustomValidity('')，否则字段会永久卡在 invalid 态自定义规则必须同步 setCustomValidity() 和 CSS 类
HTML5 原生约束（如 required、pattern）只能覆盖基础格式，业务规则比如“密码需含大小写字母+数字”“用户名已被注册”，就得靠 setCustomValidity() 配合手动样式控制。
重点：调用 input.setCustomValidity('错误信息') 后，input.checkValidity() 才会返回 false；但 Bootstrap 完全不感知这个 API，所以你必须自己补上 input.classList.add('is-invalid') 和更新 .invalid-feedback 文本。
- 错误示范：
input.setCustomValidity('密码太弱')但没加is-invalid类 → 边框不变红，下方文字也不出现 - 正确顺序：校验失败 →
setCustomValidity('...')→el.classList.add('is-invalid')→ 更新.invalid-feedback.textContent - 校验通过时，务必调
setCustomValidity('')，否则该字段后续永远通不过checkValidity()
iOS Safari 上 invalid 事件不触发，得换方案
在 iOS Safari 中，invalid 事件基本不可靠，尤其配合 novalidate 使用时。别指望靠它自动捕获错误并设提示——它可能压根不执行。
稳妥做法是：在 submit 事件中遍历所有控件，逐个调 input.checkValidity()，失败则手动设 setCustomValidity() 并加样式；同时用 input 或 blur 事件维护实时状态。
- 不要依赖
invalid事件做主校验逻辑，它只是个补充，且兼容性差 - 移动端真机测试必做，模拟器常骗人
- 如果用了异步校验（如用户名唯一性），
setCustomValidity()要等接口返回后再设，期间保持is-invalid状态可选，但别提前清空
setCustomValidity('') 这一行——它看起来像句废话，但缺了它，那个 input 就再也无法通过校验，哪怕用户已填对。
