bootstrap表单验证需手动控制is-valid/is-invalid类并配合法反馈元素，禁用默认提示、添加基础类、javascript校验切换状态；.was-validated用于提交后批量激活；自定义规则需同步setcustomvalidity与样式；ios safari需js显式控制显示；优点是标准化、兼容原生约束，局限是无内置校验逻辑且移动端需额外适配。
一、手动添加验证状态类并配合反馈元素
Bootstrap 表单验证依赖显式控制 CSS 类，而非自动监听输入变化。需在 <input>、<select></select> 或 <textarea></textarea> 元素上动态添加 is-valid 或 is-invalid 类，并确保其后紧跟 <div class="valid-feedback"> 或 <code><div class="invalid-feedback"> 元素作为直接兄弟节点，否则样式无法渲染。
<p>1、在 <code><form></form> 标签中添加 novalidate 属性，禁用浏览器默认弹窗提示。
2、为每个表单控件添加 form-control 基础类，这是 is-valid/is-invalid 边框变色生效的前提。
3、在控件闭合标签后立即插入 <div class="invalid-feedback">请输入有效邮箱</div>，不可嵌套于其他容器内或错位放置。
4、通过 JavaScript 在 blur 或 submit 事件中调用 input.checkValidity() 判断状态，再据此切换 is-valid 与 is-invalid 类。
二、使用 .was-validated 类触发表单级验证样式
该方式适用于提交后统一反馈场景，.was-validated 作用于 <form></form> 元素，可批量激活所有子控件的原生约束校验逻辑与对应视觉样式，但必须在用户实际触发提交动作后才添加，否则页面加载即显示全部错误态，严重损害体验。
1、移除 HTML 中预设的 was-validated 类，确保初始状态无验证样式干扰。
2、在表单 submit 事件处理器中，调用 event.preventDefault() 阻止默认跳转。
3、执行 form.classList.add('was-validated')，使所有已绑定 required、type="email" 等属性的控件立即响应伪类与反馈元素。
4、若验证失败，保留 was-validated；若全部通过，可选择性调用 form.classList.remove('was-validated') 清除状态。
三、通过 setCustomValidity() 实现自定义规则同步
当内置 HTML5 验证无法覆盖业务逻辑（如密码强度、用户名唯一性）时，需借助 setCustomValidity() 设置错误消息，并主动维护 Bootstrap 的视觉类与反馈文案，因 Bootstrap 不监听该 API 的变更。
1、在 input 的 blur 或 input 事件中执行校验逻辑，例如判断密码长度是否小于8位。
2、若不满足条件，调用 input.setCustomValidity('密码至少8位')；若满足，必须调用 input.setCustomValidity('')，否则字段将永久处于无效态。
3、紧接着根据 input.checkValidity() 返回值，手动添加或移除 is-invalid / is-valid 类。
4、同步更新紧邻的 invalid-feedback 文本内容，例如 feedbackEl.textContent = '密码至少8位'。
四、修复 iOS Safari 中 invalid-feedback 不显示问题
iOS Safari 对 :invalid 伪类的计算时机极为保守，常仅在 blur 或 submit 后触发，导致依赖该伪类显示的 invalid-feedback 在输入过程中无法及时出现，需改用 JavaScript 显式控制显隐。
1、为 invalid-feedback 元素设置初始 style="display: none;"。
2、在 input 的 blur 事件中，若 !input.checkValidity()，则执行 feedbackEl.style.display = 'block'。
3、在 input 的 input 事件中，若 input.checkValidity() 为真，且当前 feedback 已显示，则执行 feedbackEl.style.display = 'none'。
4、确保所有操作均在 DOM 加载完成后执行，避免因选择器未命中导致脚本静默失效。
五、Bootstrap 表单组件的核心优点
结构标准化程度高，form-control、form-label、form-group 等类提供一致的垂直间距与尺寸基准；视觉反馈明确，通过边框颜色、对勾/叉号图标及配套文字实现错误定位；与原生 HTML5 表单约束天然兼容，支持 required、minlength、pattern 等属性开箱即用；响应式设计内建，控件在不同断点下自动适配栅格宽度。
1、所有验证样式均基于纯 CSS 实现，无需额外 JS 即可呈现基础反馈效果。
2、valid-feedback 与 invalid-feedback 的显示逻辑严格绑定控件状态，避免误展或遗漏。
3、支持无障碍访问，aria-invalid 与 aria-describedby 可随状态类自动同步，满足 WCAG 要求。
六、Bootstrap 表单组件的关键局限
验证逻辑完全解耦于样式系统，框架本身不提供任何校验函数或事件绑定机制，所有有效性判定、类切换、反馈更新均需开发者自行编码实现；is-valid/is-invalid 类若被错误地静态写入 HTML，会导致页面加载即呈现验证态，违背“提交后反馈”交互范式；移动端 Safari 对伪类支持不一致，需额外 JS 补偿，增加跨端适配成本；无内置异步验证支持，如用户名可用性检查需手动集成 Promise 并阻塞提交流程。
1、was-validated 类一旦写死在 HTML 中，所有 required 字段将在页面加载瞬间显示红色边框与错误提示。
2、若遗漏 form-control 类，is-invalid 的红色边框将无法渲染，仅文字反馈可见。
3、invalid-feedback 必须是控件的**下一个兄弟元素**，包裹在 form-group 内或置于其他层级将导致 display 失效。
