novalidate 属性仅对 form 标签有效，启用后浏览器彻底跳过所有原生校验（required、type、pattern 等），不提示、不拦截、不更新 :valid/:invalid 伪类；input 或 button 上设置无效，布尔属性有即真，react 中需用 novalidate={undefined} 移除。
novalidate 属性只对 form 标签有效，加了就彻底跳过原生校验
它不是开关，也不是配置项，只要 <form novalidate></form> 出现在 DOM 里，浏览器就会忽略所有字段的 required、type="email"、pattern、min/max 等原生校验逻辑——提交时不弹气泡、不拦表单、不亮红边框。
常见错误现象：
-
<input novalidate>或<button novalidate></button>完全无效，浏览器直接忽略 -
<form novalidate="false"></form>依然生效（布尔属性有即真） - React 中写成
noValidate={false}渲染后仍是novalidate，必须用noValidate={undefined}或显式移除
加了 novalidate 后，哪些 JS 行为还管用？
它只关“自动触发”，不删 API。以下方法照常工作，但需你手动调用：
-
form.checkValidity()仍返回布尔值，可用于条件判断 -
input.reportValidity()仍会弹原生提示（慎用，调试时才需要） -
input.setCustomValidity('')配合input.checkValidity()可重置状态，否则样式可能卡住 - 监听
submit事件时，e.preventDefault()必须显式写，否则表单仍会按默认方式提交（哪怕没提示）
:valid 和 :invalid 伪类会失效，别指望它们自动更新
加了 novalidate 后，浏览器不再跟踪字段有效性状态，所以 CSS 中的 input:invalid 不再响应输入变化——初始为空时可能匹配，填完内容后也不会自动切到 :valid。
这意味着：
- 不能靠
input:invalid { border-color: red; }做实时反馈 - 若想保留视觉提示，得用 JS 主动加 class，比如
input.classList.add('is-error') - 辅助技术（如读屏器）仍会读取
required属性，语义未丢失，但状态反馈断了
和 formnovalidate 混用时优先级容易搞反
formnovalidate 是按钮级豁免，只对带它的 <button type="submit"></button> 或 <input type="submit"> 生效，且优先级高于 form 上的 novalidate。
典型误用场景：
- 表单已加
novalidate，又给某个按钮加formnovalidate——冗余，无实际影响 - 没加
novalidate，只靠formnovalidate控制“暂存草稿”按钮，但用户按回车或用 JS 调用form.submit()仍会触发校验 - Safari 对
formnovalidate支持差（iOS 15.4+ 仍有问题），关键路径别依赖它
真正难处理的是：禁用原生验证后，ValidityState 对象还在计算，但 UI 和伪类不同步——这个细节多数人调试半天才意识到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
