Bootstrap 5 表单验证需 JavaScript 主动控制 is-valid/is-invalid 类、反馈文案及 setCustomValidity()，form 必须加 novalidate 或 was-validated 才能启用样式；状态类须加在控件本身，反馈元素须紧邻控件；iOS Safari 需手动同步状态以确保及时响应。
Bootstrap 5 的表单验证提示样式不能靠纯 CSS 自动更新，必须配合 JavaScript 主动控制 is-valid/is-invalid 类、valid-feedback/invalid-feedback 文案，以及原生 setCustomValidity() 的调用时机 —— 否则你看到的永远是浏览器默认气泡或完全没反馈。
form 标签必须加 novalidate 或 was-validated
这是整个验证流程启动的前提。不加的话，Bootstrap 的 CSS 规则（比如 .was-validated .form-control:invalid）压根不会生效，红色边框和反馈文字都出不来。
-
novalidate：禁用浏览器默认弹窗，把控制权完全交给 JS；适合需要自定义文案、联动校验（如两次密码）、或兼容 iOS Safari 的场景 -
was-validated：通常由 JS 在 submit 时动态添加，表示“已触发过一次验证”，之后所有 :invalid/:valid 伪类才开始参与样式计算 - 别混用：同时加
novalidate和was-validated没问题；但只加needs-validation而不配 JS 监听 submit，样式也不会动
is-valid 和 is-invalid 必须加在控件本身，不是外层容器
常见错误是把 is-invalid 加在 <div class="mb-3"> 上，结果边框颜色不变、反馈文字也不显示 —— Bootstrap 5 只认直接作用于 <input>、<select>、<textarea> 的状态类。
- 正确写法：
<input type="email" class="form-control is-invalid"><div class="invalid-feedback">邮箱格式不对</div> - 反馈元素
<div class="invalid-feedback">必须紧跟在对应控件之后，中间不能插其他标签（比如<br>或空文本节点） - iOS Safari 下，
:invalid伪类触发延迟，所以仅靠伪类 +novalidate不够稳；必须用 JS 主动设 class 才能确保 blur 或 input 时立刻响应
自定义规则要用 setCustomValidity() + 手动同步状态
HTML5 原生的 required、type="email" 等能自动触发 is-invalid，但像“密码需含数字”“用户名已被占用”这类逻辑，得靠 setCustomValidity()，且 Bootstrap 完全不监听它变化。
- 调用
input.setCustomValidity('密码太短')后，input.checkValidity()返回false，但 DOM 上不会自动加is-invalid - 必须手动：
if (!input.checkValidity()) { input.classList.add('is-invalid'); input.nextElementSibling.textContent = '密码太短'; } - 记得在
input或blur事件里重置：输入内容变了就调input.setCustomValidity('')，再删is-invalid、清空 feedback 文本、加is-valid（如果通过） - 别漏掉
reportValidity()：它会强制触发展示（包括 Safari），但只应在提交时用；日常交互建议用checkValidity()配合手动更新
iOS Safari 中 invalid-feedback 不显示的真正原因
不是 Bug，是 Safari 对 :invalid 的计算时机更保守：它往往等到 blur 或表单 submit 才重新评估，而 Bootstrap 的 .invalid-feedback 显示依赖该伪类或你手动加的 is-invalid 类。
- 解决方案只有两个：一是在
blur时主动判断并加 class；二是放弃伪类，全程用 JS 控制is-invalid+textContent - 不要指望
data-bs-feedback—— 这个属性根本不存在，Bootstrap 5 没提供这个机制 - 移动端调试时，优先检查
input.checkValidity()返回值是否符合预期，再看 class 和 feedback 是否同步更新
最易被忽略的一点：所有手动设置的状态（class、feedback 文本、setCustomValidity）必须成对清理。用户改完内容后还留着 is-invalid 或旧的错误文案，比没验证还伤体验。
