novalidate 是 的布尔属性，用于禁用浏览器原生表单验证，仅在需完全由 javascript 控制验证流程（如分步表单、统一错误提示、联动后端）时必须添加；它不影响 js 验证 api，但会使 :valid/:invalid 伪类失效。
novalidate 是什么，什么时候必须加
novalidate 是 <form></form> 的布尔属性，加了它，浏览器就不再对表单做任何原生拦截：不弹红框、不阻止提交、不校验 required、type="email"、pattern、min/max 等约束。但它只影响“提交时的自动行为”，不影响 JS 接口本身。
必须加 novalidate 的典型场景是：你打算用 JavaScript 全权控制验证流程，比如统一收集错误、渲染在字段下方、联动后端接口校验、或做分步表单（如“暂存”和“提交”两个按钮逻辑不同）。
- 加了之后，
form.checkValidity()仍返回false，input.validity.valid也照常计算 —— 它们没被禁用，只是浏览器不自动调用了 - 别误以为加了它就能省掉 JS 校验：如果没写任何 JS 逻辑，用户点提交就直接发脏数据了
-
novalidate是布尔属性，写成<form novalidate></form>就行，novalidate="false"或novalidate="true"都是错的（前者无效，后者语义错误）
formnovalidate 怎么用，为什么不能加在 input 上
formnovalidate 只能用在 <button type="submit"></button> 或 <input type="submit"> 上，表示“点这个按钮时，跳过所有验证”。它会覆盖 <form novalidate></form> 的设置 —— 比如表单开了验证，但你想加一个“暂存草稿”按钮，就可以给它加 formnovalidate。
常见错误是把它写在 <input type="text"> 或 <select></select> 上，这完全无效。浏览器根本不认，也不会报错，只会默默忽略。
- 多个提交按钮可以混用：
<button type="submit">提交订单</button>不加formnovalidate，走默认校验；<button type="submit" formnovalidate>保存为草稿</button>则跳过 - 注意：回车提交仍受
<form></form>的全局设置控制，formnovalidate只对点击该按钮生效 - 如果按钮没写
type="submit"（比如只写了<button></button>），它默认仍是 submit，所以也会触发校验 —— 这点容易被忽略
加了 novalidate 后，CSS 伪类和 JS 行为还生效吗
加了 novalidate 后，:valid 和 :invalid 伪类**不再更新**。也就是说，样式可能“卡住”：比如字段初始为空，:invalid 生效，加了 novalidate 后你填了内容，但伪类不会变回 :valid，除非你手动触发重绘（比如切 tab 再切回来）或靠 JS 强制更新。
JS 行为则基本不受影响：
-
input.reportValidity()仍会弹原生提示（除非你e.preventDefault()拦截了事件） -
input.setCustomValidity('')和checkValidity()都正常工作 - 但如果你在
submit事件里写了form.reportValidity()，那它就会弹窗 —— 这和novalidate不冲突，只是你主动调了 - 真正要小心的是：禁用原生验证后，没人帮你触发
invalid事件，也没人帮你渲染错误提示，这些都得你补上
动态控制验证开关时容易踩的坑
用 JS 动态设 form.noValidate = true（注意大小写是 noValidate）确实可行，但有几个边界情况容易翻车：
- 设完之后再改回
false，某些浏览器不会立刻恢复验证行为，得手动调一次form.checkValidity()触发重算 - 隐藏字段（
display: none）仍参与验证 ——novalidate不解决这个问题；真想让它不校验，得设input.disabled = true或删掉required - 移动端 Safari 对
type="number"的软键盘触发不受novalidate影响，禁用验证 ≠ 改变输入类型行为 - 用
form.submit()提交会彻底跳过所有验证（包括reportValidity()），但你也收不到任何反馈 —— 这比novalidate更激进，慎用
最稳妥的做法，是把 novalidate 当作“关掉浏览器默认干预”的开关，而把校验逻辑完全交给 JS 控制 —— 包括何时检查、检查哪些字段、怎么提示、怎么联动后端。否则，很容易出现“看起来没校验，其实某处又弹窗了”这种混乱状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
