novalidate仅禁用浏览器原生校验，不提供任何验证逻辑，需手动实现校验、提示与反馈；formnovalidate在safari中兼容性差，应统一用novalidate配合js控制；加novalidate后:invalid伪类失效，须用js管理样式与有效性状态。
novalidate 本身不提供验证，只禁用原生校验
加了 novalidate 不等于“做了兼容”，它只是把浏览器的自动拦截关掉——校验逻辑、提示方式、失败反馈全得你补上。很多人以为加了就万事大吉，结果表单一提交直接穿过去，后端报 400 才发现前端根本没拦。它不帮你做任何判断，只交出控制权。
formnovalidate 按钮级豁免在 Safari 里大概率失效
想让“暂存草稿”按钮跳过校验，但又保留“正式提交”按钮的原生提示？别只靠 formnovalidate。iOS 15.4+ 仍存在兼容问题，部分 Safari 版本会完全忽略该属性，导致点击“暂存”时照样弹气泡。更稳妥的做法是：
- 统一给
<form></form>加novalidate，彻底关闭自动校验 - 两个按钮都走 JS 提交：对“暂存”跳过字段检查；对“正式提交”调用
form.checkValidity()+ 自定义提示 - 避免依赖
formnovalidate做关键路径逻辑，尤其不能假设回车提交也会被豁免（它不会）
加了 novalidate 后 :invalid 伪类失效，但 required 属性还在
DOM 里 required、type="email" 这些属性没被删，读屏器仍会读作“必填项”，但 CSS 的 input:invalid 不再响应输入变化——初始为空时可能匹配，填完邮箱却还是红边框，因为浏览器已停止更新有效性状态。这意味着：
- 不能靠
input:invalid { border-color: red; }做实时反馈 - 得用 JS 主动管理 class：
input.classList.toggle('is-error', !input.checkValidity()) - 若保留原生样式意图，得手动重置：
input.setCustomValidity('')再调input.reportValidity()触发一次状态刷新（仅调试用）
React/Vue 中 novalidate 渲染容易写错
框架会把驼峰转成小写，但规则不一致。React 要写 noValidate（JSX 属性名），但最终必须渲染为 DOM 属性 novalidate 才生效。常见翻车点：
-
noValidate={false}→ 渲染成novalidate="false"，浏览器当真值处理，验证照常被禁用 -
noValidate={undefined}或显式不传，才能确保 DOM 里不出现该属性 - Vue 模板中写
:novalidate="false"同样无效，应改用v-bind:novalidate="null"或条件渲染
最保险的方式是打开浏览器开发者工具，直接看 <form></form> 标签上有没有 novalidate 字样——别信代码里写了就一定生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
