bootstrap表单验证需在form加novalidate或was-validated，控件本身加is-valid/is-invalid，并紧跟valid-feedback/invalid-feedback；js校验用checkvalidity()静默检测、reportvalidity()触发展示；ios safari需js控制显隐。
表单控件怎么加 is-valid / is-invalid 才生效
Bootstrap 的表单验证样式不是自动触发的，必须手动添加状态类，且依赖父容器的 .was-validated 或 novalidate 属性才能启用原生约束逻辑。
常见错误是只给 <input> 加 is-valid，但没处理表单层级结构，结果样式不渲染。
-
<form></form>必须有novalidate（禁用浏览器默认弹窗）或在 JS 提交前加classList.add('was-validated') - 状态类（
is-valid/is-invalid）要加在<input>、<select></select>、<textarea></textarea>本身，不是外层<div class="form-group"> <li>配套的反馈图标和文字需用 <code><div class="valid-feedback"> 或 <code><div class="invalid-feedback">，且必须紧跟在对应控件之后 <pre class="brush:php;toolbar:false;"></pre> <form novalidate> <div class="mb-3"> <label class="form-label">邮箱</label> <input type="email" class="form-control is-invalid"><div class="invalid-feedback">请输入有效邮箱</div> </div> </form> <h3>JS 手动触发表单验证时，<code>checkValidity()和reportValidity()怎么选两者都返回布尔值，但行为差异直接影响用户体验和样式渲染。
checkValidity()只检查、不展示错误提示；reportValidity()会触发浏览器默认气泡 + Bootstrap 的is-invalid样式（前提是表单有novalidate且你已监听了invalid事件）。- 做静默校验（比如实时输入检测），用
checkValidity()，然后手动增删is-valid/is-invalid - 提交时统一反馈，直接调
reportValidity()更省事，它会自动给无效字段加is-invalid并显示invalid-feedback - 注意：如果用了
novalidate，reportValidity()默认不弹原生气泡，但依然会触发 Bootstrap 样式更新
自定义验证规则下，
setCustomValidity()怎么和 Bootstrap 状态同步Bootstrap 不监听
setCustomValidity()的变化，它只响应原生 validity API 和表单事件。所以手动设了错误消息后，必须主动更新 class 和反馈文案。- 调用
input.setCustomValidity('密码太短')后，input.checkValidity()会返回false，但is-invalid不会自动加上 - 必须配合 JS：当
!input.checkValidity()时，加is-invalid、更新invalid-feedback.textContent；否则加is-valid并清空反馈 - 别忘了在
input上监听input或blur事件来重置状态，否则用户改完内容后样式还卡在错误态
为什么移动端 iOS Safari 里
invalid-feedback常不显示不是 Bug，是 Safari 对
:invalid伪类的触发时机更保守——它往往等 blur 或 submit 才计算，而 Bootstrap 的invalid-feedback显示依赖该伪类或手动 class。- 最稳方案：放弃纯 CSS 触发，全部用 JS 控制
is-invalid和invalid-feedback的显隐 - 避免用
:invalid ~ .invalid-feedback这类兄弟选择器，iOS Safari 对动态 validity 变化响应滞后 - 如果用了
novalidate，确保在submit事件里调reportValidity()，再阻止默认行为，这样能兜住 Safari 的行为差异
复杂点在于：样式控制权其实在 JS 手里，而不是靠 class 堆叠或 CSS 伪类自动流转。容易被忽略的是，哪怕 HTML 结构完全正确，缺了那一句
form.classList.add('was-validated')或漏掉novalidate，整个验证链就断了。 - 做静默校验（比如实时输入检测），用
