在 标签上添加 novalidate 属性可彻底禁用 HTML5 原生表单验证，它作用于整个表单及所有字段（如 required、type="email" 等），而 formnovalidate 仅对单次提交有效；需注意 CSS 伪类 :invalid 仍会生效，且第三方库或残留 JS 监听器可能引发重复校验。
怎么禁用 HTML5 表单原生验证
直接在 <form></form> 标签上加 novalidate 属性，就能彻底关闭浏览器的默认校验行为。这个属性是布尔型，写上即生效，无需赋值。
常见错误是只给某个 <input> 加 formnovalidate（比如提交按钮），这只能跳过单次提交校验，但表单其他交互（如失去焦点、回车提交）仍可能触发原生提示。真正“禁用校验”的起点，是 <form novalidate></form>。
-
novalidate作用于整个表单，包括所有required、type="email"、pattern等规则 - 若使用 JavaScript 手动调用
form.checkValidity()或form.reportValidity()，这些方法仍会返回结果，但不会自动弹出气泡提示 - 某些旧版 Safari 对
novalidate支持不稳定，建议搭配onsubmit="return false;"做双重保险（仅调试期）
校验脚本冲突的典型现象
禁用原生校验后仍出现重复提示、输入框变红、提交被阻断，大概率是第三方库（如 jQuery Validation、VeeValidate、Formik）或自定义 addEventListener('input') 与 HTML5 原生行为残留耦合。
最常被忽略的是：即使写了 novalidate，浏览器仍会设置 :valid/:invalid 伪类，CSS 里如果用了 input:invalid { border: 1px solid red; }，视觉上就像“还在校验”。
立即学习“前端免费学习笔记（深入）”；
- 点击提交按钮时弹出两个提示：一个是浏览器原生气泡，一个是 JS 库的 toast → 检查是否漏了
novalidate，或监听了submit却没preventDefault() - 输入过程中实时报错，但没写任何 JS → 查 CSS 中是否误用了
:invalid或:user-invalid - 调用
input.setCustomValidity('')后样式不恢复 → 需手动触发input.checkValidity()或重置input.validity状态
排查 validate 相关 JS 干扰的实操步骤
打开 DevTools → Elements 面板，选中问题 <input>，在右侧面板的 Event Listeners 里展开 blur、input、submit，看是否有未预期的监听器绑定。重点关注是否来自框架自动注入（如 Vue 的 v-model + rules 组合）或全局插件。
- 临时注释掉所有表单相关 JS 初始化代码（如
new Validator(...)），观察是否还触发校验 → 快速定位干扰源 - 检查是否多次调用
form.addEventListener('submit', handler)，导致 handler 被执行多遍，其中某次没preventDefault() - 若用 React/Vue/Angular，确认没有同时启用框架表单校验和原生
required—— 二者语义重叠，容易互相覆盖状态 - 运行
getEventListeners(document.querySelector('form'))在 Console 中查看全部绑定，比 GUI 更直观
为什么 setCustomValidity 不生效或清不掉错误
setCustomValidity() 是个“开关式” API：只要传入非空字符串，该字段就进入 invalid 状态；传空字符串只是清除自定义错误，但不会覆盖其他校验失败（如 required 未填、type="email" 格式错）。它不改变原生约束本身，只叠加一层额外判断。
- 想完全接管校验逻辑，必须先确保
<input>上没有required、minlength等原生属性，否则它们仍会参与checkValidity()计算 - 调用
input.setCustomValidity('')后，需再调用input.reportValidity()才能刷新 UI（尤其在 Chrome 中） - 注意：Firefox 对
setCustomValidity('')后的样式更新较慢，可加input.classList.remove('invalid')配合 CSS 控制
复杂点在于，校验状态是累积的 —— 一个字段可能同时受 HTML5 规则、JS 自定义规则、CSS 伪类、框架响应式数据影响。最容易被忽略的是：你以为禁用了校验，其实只是隐藏了提示，而底层 validity 状态仍在驱动样式或条件渲染。
