必须在上添加novalidate属性才能禁用浏览器原生验证气泡，它保留语义和js校验能力，使bootstrap提示正常生效；拼写错误、位置错误或被动态移除会导致失效。
为什么表单提交时还会弹原生气泡提示
因为浏览器默认启用 HTML5 表单约束验证，只要 input 有 required、type="email" 等属性，点击 submit 就会触发原生气泡（如“请填写此字段”），这和 Bootstrap 的 .invalid-feedback 提示冲突，且无法用 CSS 或 class 控制关闭。
必须在 <form></form> 上加 novalidate
novalidate 是唯一可靠方式，它禁用浏览器所有原生验证弹窗，同时保留 required、pattern 等语义和 JS 可读性，让 Bootstrap 的校验逻辑真正接管。
- 写法必须是：
<form novalidate></form>，不是no-validate，也不是加在input上 - 漏掉这个属性，
.was-validated类不会生效，.invalid-feedback永远不显示 - 加了之后，
checkValidity()仍可正常返回true/false，不影响 JS 校验逻辑
reportValidity() 会重新触发气泡吗
在 novalidate 存在的前提下，reportValidity() 不会再弹原生气泡——它只驱动 Bootstrap 的视觉反馈（自动加 is-invalid、显示 .invalid-feedback）。但如果你没加 novalidate，它就等同于直接触发浏览器默认行为。
- 推荐统一用
form.checkValidity()做静默判断，再手动控制类和反馈文案 - 若想一键触发展示效果，且已确保
novalidate存在，reportValidity()是安全的 - 别在单个
input上调reportValidity()，容易破坏表单整体状态同步
加了 novalidate 还弹窗？检查这几个点
常见“加了也不生效”基本是配置链断裂，重点排查：
-
form元素是否真的渲染出了novalidate属性（查看页面源码或 Elements 面板） - 有没有其他 JS 脚本在运行时动态移除了
novalidate（比如某些表单插件初始化逻辑） - 是否误用了
form.reportValidity()之前没加novalidate，导致首次执行后浏览器缓存了旧行为 - iOS Safari 有时对
novalidate响应滞后，需在submit事件中显式event.preventDefault()双保险
最易忽略的是：属性名拼错、写在子元素上、或被模板引擎（如 Twig、Blade）条件逻辑意外过滤掉。
