novalidate 是布尔属性，存在即禁用表单原生验证，删除即可恢复；不可“关闭”，仅通过有无控制；常用于配合 js 验证库实现统一校验体验。
novalidate 属性本身不能“关闭”——它只在存在时生效
novalidate 是一个布尔属性，只要写在 <form></form> 标签上（无论值是 novalidate、novalidate="novalidate" 还是 novalidate=""），浏览器就会跳过该表单的原生 HTML5 验证（比如 required、type="email"、pattern 等触发的提示）。它没有“关闭”状态；想恢复验证，直接删掉这个属性即可。
常见错误现象：
– 表单提交没弹出必填提示，但代码里明明写了 required
– 控制台没报错，但 checkValidity() 返回 true 却仍被提交 —— 很可能 novalidate 悄悄挂在了 <form></form> 上
- 检查 DOM：用浏览器开发者工具查看
<form></form>标签名后是否含novalidate - 动态移除：用 JavaScript 执行
form.removeAttribute('novalidate')可即时恢复验证行为 - 服务端渲染框架（如 Vue/React）中，注意模板里是否条件性地写了
v-bind:novalidate="xxx"或{novalidate && 'novalidate'}，容易误留
想临时禁用验证？别硬删 novalidate，用 JS 更可控
直接删 novalidate 会立刻激活所有字段的原生校验样式（如红边框、:invalid 伪类），可能干扰 UI。更稳妥的做法是保留 novalidate，改用 JavaScript 主动控制：
- 提交时调用
form.checkValidity()手动校验，按需决定是否event.preventDefault() - 对特定字段绕过验证：给
<input>加formnovalidate属性（仅对 type="submit" / "image" 按钮有效），点击该按钮时不触发表单验证 - 禁用验证但保留样式反馈：用 CSS 覆盖
:invalid的默认样式，例如input:invalid { box-shadow: none; }，避免视觉冲突
novalidate 和前端验证库（如 Yup + Formik）能共存吗？
能，而且推荐共存：把 novalidate 当作“关掉浏览器抢跑”，把验证逻辑完全交给 JS 库处理。
- 不加
novalidate时，用户点提交可能先看到浏览器弹窗（如“请填写此字段”），再被 Formik 的错误信息覆盖，体验割裂 - 加了
novalidate后，所有校验时机、提示文案、高亮逻辑均由 JS 库统一控制，行为可预测 - 注意：某些库（如 React Hook Form）默认启用
noValidate，但底层仍依赖HTMLFormElement.reportValidity()，此时手动调用该方法会失效 —— 必须显式传shouldFocus: false或改用trigger()
移动端 Safari 对 novalidate 的兼容细节
iOS 15.4+ 修复了一个关键 bug：此前若表单含 novalidate 且某个 <input type="date"> 有 required，点击日期控件会直接报错“InvalidStateError”。现在已正常，但仍有两点要注意：
- Safari 不支持
formnovalidate在<button type="submit"></button>上的行为（Chrome/Firefox 支持），所以不要依赖它做条件提交 - 即使有
novalidate，Safari 仍可能对type="number"强制过滤非数字输入（如粘贴字母），这不是验证，而是输入限制 —— 需用inputmode="numeric"+ JS 拦截onInput来兜底
