novalidate仅禁用浏览器自动拦截提交和原生UI提示，保留required等属性的语义、移动端键盘及辅助技术支持，不影响CSS伪类和JS验证API，必须加在form标签上才生效。
它不“关掉验证”，只是把浏览器自动拦截提交和弹气泡这层拿掉——required、type="email"、pattern这些属性还在 DOM 里，语义、移动端键盘、辅助技术读取全保留，但提交不再被卡住。
novalidate 是表单级开关，不是按钮级补丁
很多人试过给某个 <button type="submit"> 加 formnovalidate，结果回车提交或调用 form.submit() 时照样被拦——因为 formnovalidate 只对点击该按钮那次生效，且不覆盖失焦、回车、JS 提交等其他触发路径。真要禁用整个表单的原生校验，必须写在 <form> 标签上：<form novalidate>。它优先级最高，渲染即生效，动态加（比如 React 里 useEffect 插入）可能有闪现风险。
加了 novalidate 后，CSS 伪类和 JS API 照常工作
这是最容易误判的点：:valid 和 :invalid 伪类依然计算，input.validity.valid 仍返回布尔值，form.checkValidity() 还是能用。区别只在：浏览器不再自动调用 reportValidity() 并阻断提交。所以你完全可以：
- 保留
required属性，让屏幕阅读器知道这是必填项 - 用
input:invalid { border-color: #e53e3e; }维持视觉反馈 - 在 submit 事件里手动调
if (!form.checkValidity()) { form.reportValidity(); return; }
只要没漏掉 e.preventDefault()，就不会出现两个气泡同时弹出的尴尬场面。
立即学习“前端免费学习笔记（深入）”；
React/Vue 里拼写和透传容易翻车
框架会做属性转换，直接写 novalidate 常常无效：
- React 中必须写成
noValidate（驼峰），否则 JSX 不识别；但最终渲染到 DOM 必须是小写novalidate，检查 Elements 面板确认是否成功输出 - Vue 模板中写
novalidate没问题，但如果用v-bind动态绑定，得写成:novalidate="true"，不能只写novalidate字符串 - 服务端渲染（SSR）或 CMS 输出的表单，如果模板里漏了这个属性，JS 补救意义不大——用户可能在 JS 加载前就点了提交
别指望它替代后端校验，也别信它能“隐藏错误”
novalidate 只影响前端交互层。curl、Postman、禁用 JS、甚至浏览器控制台改 DOM 都能绕过它。更关键的是：它不阻止第三方库自动调用 reportValidity()。常见踩坑场景：
- 用了 VeeValidate 或 Formik，又忘了关它的
enableNativeValidation选项，结果 JS 校验和原生提示打架 - CSS 里写了
input:invalid { outline: none; }，以为能隐藏红边框——其实加了novalidate后:invalid仍匹配，只是不弹窗而已 - 在 iOS 模拟器里测试，发现邮箱输入框还是强制调出数字键盘——这不是校验，是
type="email"的语义行为，跟novalidate无关
真正麻烦的从来不是加不加这个属性，而是加完之后，是否同步清理了残留的 JS 监听器、CSS 规则和框架配置。DOM 里留着 required 却靠 JS 控制逻辑，稍有疏漏就会让表单状态错乱。
