formnovalidate是布尔属性，仅对type="submit"的button或input有效，点击时跳过原生验证直接提交；它不关闭验证逻辑，validity状态和checkvalidity()仍正常计算，但safari兼容性差需降级处理。
formnovalidate 是什么，它真能“跳过验证”吗
formnovalidate 是一个布尔属性，只对 <button type="submit"></button> 或 <input type="submit"> 有效。它不是“关掉验证”，而是告诉浏览器：**这次点击，别走原生校验流程，直接提交**。
常见错误现象：formnovalidate 加在 <button type="button"></button> 上完全无效；加在 Safari 的 iOS 15.4+ 里仍可能被忽略；加了却没看到效果，大概率是按钮没设 type="submit"。
- 必须配合
type="submit"使用，否则不触发表单提交，formnovalidate就没意义 - 它优先级高于
<form novalidate></form>：哪怕表单本身没加novalidate，只要某个提交按钮带formnovalidate，点它就跳过 - 不改变字段的
validity状态——input.validity.valid还是照常计算，checkValidity()也依然返回正确布尔值
什么时候该用 formnovalidate，而不是给整个 form 加 novalidate
典型场景是「多按钮语义分离」：一个“保存草稿”，一个“正式提交”。前者不该被 required 拦住，后者必须校验。
如果全用 <form novalidate></form>，你就得手动为每个按钮补 JS 校验逻辑，反而更重；而 formnovalidate 让你保留原生校验能力，只对特定按钮做豁免。
- ✅ 适合：
<button type="submit" formnovalidate>暂存</button>+<button type="submit">提交</button> - ❌ 不适合：想让所有提交都跳过校验——这时直接用
<form novalidate></form>更干净 - ⚠️ 注意：
formnovalidate不影响 CSS 中的:invalid伪类行为；但如果你同时用了novalidate在 form 上，:invalid就不会更新（因为浏览器停止跟踪有效性）
formnovalidate 的兼容性与写法陷阱
它在 Chrome、Firefox、Edge、Opera 都支持，但 Safari（包括 iOS 15.4+）仍有兼容问题，不能作为关键路径依赖。
写法上，HTML5 允许简写：<button formnovalidate></button>；XHTML 要求显式赋值：<button formnovalidate="formnovalidate"></button>。混用时容易漏掉 type="submit"，导致按钮根本没提交行为。
- 错误写法：
<button formnovalidate>跳过</button>（缺type="submit"） - 正确写法：
<button type="submit" formnovalidate>跳过</button> - 兼容写法（防 Safari）：
<button type="submit" onclick="event.preventDefault(); submitDraft()">暂存</button>，把逻辑收归 JS
加了 formnovalidate 后，为什么 reportValidity() 还弹窗
因为 formnovalidate 只影响「提交触发时是否自动校验」，不阻止你手动调用 reportValidity() 或 checkValidity()。
如果你在 submit 事件里写了 e.preventDefault(); form.reportValidity();，那无论有没有 formnovalidate，都会弹原生提示——这不是 bug，是设计如此。
- 真正想禁用弹窗，得靠
event.preventDefault()拦住事件，再自己决定是否调用reportValidity() -
formnovalidate和novalidate都不干涉invalid事件触发，监听它仍可捕获字段失效 - 若你用 JS 做校验但还想保留红边框等视觉反馈，别依赖
:invalid，改用 class 控制，比如input.is-invalid
formnovalidate 就万事大吉，结果在 Safari 里功能断裂，又没 fallback；或者误以为它会抑制 invalid 事件或 :invalid 样式，导致视觉和逻辑脱节。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
