novalidate 是必须的，它禁用浏览器原生弹窗验证以避免与 Bootstrap 的 .invalid-feedback 冲突，并使 .needs-validation 和 was-validated 类生效；校验时应使用 checkValidity() 而非 reportValidity()，并在提交后手动添加 was-validated 类。
为什么加 novalidate 是必须的一步
浏览器自带的弹窗式验证会和 bootstrap 的视觉反馈冲突，比如点击提交时突然弹出“请填写此字段”，掩盖了你精心写的 .invalid-feedback 提示。不加 novalidate，bootstrap 的验证样式根本不会触发。
常见错误现象：表单提交后没任何红色边框或提示文字，但控制台也没报错——大概率就是漏了这个属性。
-
novalidate必须写在<form></form>标签上，不是某个 input 上 - 它只是禁用原生弹窗，不影响
required、type="email"这些 HTML5 属性的语义和 JS 可读性 - Bootstrap 5 的
.needs-validation类只在有novalidate时才真正生效
checkValidity() 和 reportValidity() 到底该用哪个
checkValidity() 只返回布尔值，不触发界面反馈；reportValidity() 会同时校验 + 显示原生提示（又回到上面那个弹窗问题）。所以 Bootstrap 官方示例里只用 checkValidity()，配合手动加 was-validated 类来驱动样式。
实操建议：
- 永远用
form.checkValidity()判断，别用reportValidity() - 校验失败后必须立刻执行
form.classList.add('was-validated')，否则.valid-feedback和.invalid-feedback不显示 - 不要依赖
input.reportValidity()单个触发——它会破坏整体表单状态同步
自定义验证逻辑怎么塞进 Bootstrap 验证流
HTML5 原生属性（如 required、minlength）只能覆盖基础规则，手机号、两次密码一致、用户名是否已存在这类需求，得靠 JavaScript 注入。
正确做法是用 setCustomValidity()，但它有个关键限制：只要传入非空字符串，该字段就判定为无效；传空字符串才表示“通过”。
- 在
input的change或blur事件里调用setCustomValidity() - 别忘了在验证通过时调用
setCustomValidity('')，否则字段会一直卡在“无效”状态 - 如果用了
form.addEventListener('submit', ...)，记得每次 submit 前重新触发一遍校验逻辑，因为用户可能绕过 blur 直接点提交
为什么 .was-validated 不能一开始就加在 form 上
加了就等于“已经提交过一次”，所有 required 字段一加载就显示红色边框和 .invalid-feedback，体验极差。Bootstrap 设计意图是“提交后才反馈”，不是“加载即警告”。
容易踩的坑：
- 把
was-validated写死在 HTML 里，结果页面一打开所有输入框都是红的 - 在 JS 里用
form.classList.remove('was-validated')清除状态后，没重置每个 input 的setCustomValidity('')，导致后续校验失效 - 用 AJAX 提交成功后忘记手动清除
was-validated，下次打开表单还是残留上次的验证态
复杂点在于：验证状态、自定义错误消息、CSS 类、DOM 反馈这四者必须严格同步，少一个环节就会出现“提示文字出来了但边框没变色”或者“边框红了但没提示文字”这种断层现象。
