novalidate是布尔属性，存在即禁用整个表单原生验证，删除即恢复，不接受任何值；必须写在form标签上，如<form novalidate>，写在input或button上无效，novalidate="false"等写法仍生效。
novalidate 属性不是“开关”，它只存在或不存在；写上就全局禁用表单原生验证，删掉就恢复——没有中间状态，也不接受任何值。
novalidate 的正确写法与常见误写
它必须直接写在 <form> 标签上，且是布尔属性：有即生效，无即不生效。
-
<form novalidate></form>✅ 推荐写法，简洁、语义清晰 -
<form novalidate=""></form>✅ 浏览器兼容，但冗余 -
<form novalidate="false"></form>❌ 无效，浏览器仍会禁用验证 -
<form novalidate="true"></form>❌ 语义错误，不推荐 -
<input novalidate>或<button novalidate>❌ 属性不被识别，完全无效
为什么加了 novalidate 还弹出浏览器提示？
典型原因不是 novalidate 失效，而是 JavaScript 主动调用了 reportValidity()，或者监听了 submit 事件却没调用 e.preventDefault()。
- 检查 JS 是否写了类似
form.reportValidity()—— 即使表单带novalidate，这个方法仍会返回布尔值，但不再弹窗；若你看到弹窗，说明它被调用了（且表单可能没加novalidate） - 检查是否漏掉了
e.preventDefault()：仅监听submit不够，不阻止默认行为，浏览器照常校验并拦截 - 检查 DOM 中是否真有
novalidate：用开发者工具查看<form>标签名后有没有该属性，别被模板条件渲染（如v-bind:novalidate="isCustomValidating"）悄悄保留
novalidate 后，:invalid 伪类还生效吗？
会。这是最容易被忽略的副作用：novalidate 只关提交拦截和错误提示，不关浏览器对字段有效性的实时计算。
立即学习“前端免费学习笔记（深入）”；
-
input:invalid依然会匹配那些值不合法的字段（比如required字段为空、type="email"输入了 “abc”） - 如果你 CSS 里写了
input:invalid { border-color: red; }，输入框还是会变红——这不是校验在运行，只是样式在响应状态 - 想彻底隐藏视觉反馈？得加 CSS 覆盖：
input:invalid { box-shadow: none; border-color: initial; }，或改用:user-invalid（更精准，只在用户交互后触发）
动态控制 novalidate 的 JS 写法
需要运行时切换？别操作字符串属性，用 DOM API 直接读写 noValidate（注意大小写）。
- 禁用验证：
form.noValidate = true - 恢复验证：
form.noValidate = false或form.removeAttribute('novalidate') - 检查当前状态：
form.hasAttribute('novalidate')比form.noValidate更可靠（后者在某些旧 Safari 版本中可能不准） - 注意：设
form.noValidate = true后，form.checkValidity()仍返回false（只要字段本身不合法），但它不会阻断提交
真正难的不是加 novalidate，而是加完之后要不要补 checkValidity()、怎么设计错误提示位置、以及如何让 :invalid 样式不和你的 UI 冲突——这些才是影响体验的关键点。
