真正禁用HTML5表单验证需三步：1. 表单加novalidate属性；2. 特殊提交按钮加formnovalidate；3. 清理:invalid伪类样式或调用setCustomValidity('')重置状态。
HTML5 表单验证默认开启，想彻底禁用，不能只靠删掉 required 或 pattern —— 浏览器仍可能触发原生提示（比如点击提交时弹出“请填写此字段”）。真正有效的禁用，得从三个层面同时干预：标记、行为、样式。
禁用原生验证：用 novalidate 属性最直接
这是最常用也最可靠的入口。它作用于整个表单，让浏览器跳过所有内置校验逻辑（包括 required、type="email"、minlength 等）。
- 加在
<form></form>标签上即可，无需 JS：<form novalidate></form> - 如果已有
onsubmit事件，novalidate不影响你自己的 JS 提交逻辑 - 注意不是
noValidate（驼峰）或no-validate（短横），必须全小写novalidate - 兼容性极好，IE10+、所有现代浏览器都支持
避免误触发：别漏掉 formnovalidate 按钮
当表单里有多个提交按钮（比如“暂存”和“提交”），你只想让其中一个绕过校验，就不能只靠 novalidate 全局关——要用 formnovalidate 给特定按钮“开绿灯”。
-
<button type="submit" formnovalidate>暂存草稿</button>：点击它时，表单不校验，直接触发submit事件 - 这个属性只对
type="submit"的按钮/输入生效，对普通button无效 - 它优先级高于
form上的novalidate，但仅限该按钮；其他提交按钮仍按原规则走 - 别和
formaction混用导致行为混乱，尤其在动态修改表单结构时
清除残留状态：手动重置 :valid/:invalid 样式
即使加了 novalidate，用户之前输过内容、又删空了，某些浏览器（如 Chrome）仍会保留 :invalid 伪类，导致 CSS 样式异常（比如边框变红）。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 方案：用
form[novalidate] :is(input, select, textarea) { all: unset; }太暴力，推荐更精准的：form[novalidate] :is(input, select, textarea):invalid { box-shadow: none; border-color: inherit; } - JS 方案（更稳妥）：提交后或初始化时调用
form.reset()，或遍历字段设element.setCustomValidity('') - 注意
setCustomValidity('')必须传空字符串，传null或undefined会被转成"undefined"，反而激活校验
真正禁用 HTML5 表单验证，核心就三件事：表单加 novalidate、特殊按钮加 formnovalidate、再清理一次伪类样式或状态。很多人卡在第三步——看着没报错，但输入框还是红的，其实是 CSS 在“假报警”。
