novalidate是布尔属性，直接添加到form标签即可禁用原生验证，如；不可赋值，novalidate="false"等写法无效；配合CSS伪类处理可彻底关闭验证样式。
form 标签的 novalidate 属性怎么用
直接禁用整个表单的原生 HTML5 验证，就在 <form></form> 标签上加 novalidate 属性即可。它是个布尔属性，写上就生效，不需要赋值。
常见错误是写成 novalidate="false" 或 novalidate="true" —— 这两种都无效，浏览器只认是否存在该属性本身。
-
<form novalidate></form>✅ 正确，所有内置校验（如required、type="email"）在提交时被跳过 -
<form novalidate=""></form>✅ 等效写法，空字符串也成立 -
<form novalidate="false"></form>❌ 浏览器仍会启用验证 - JavaScript 动态设置：
form.noValidate = true也能达到同样效果
submit 事件里调用 event.preventDefault() 的时机
仅靠 preventDefault() 不能“禁用验证”，它只是阻止默认提交行为；但验证本身已在点击提交按钮时触发，并可能弹出浏览器提示（比如 Chrome 里红色边框+气泡提示）。所以必须配合 novalidate，或改用非 submit 类型按钮。
典型误操作：只监听 submit 并 preventDefault()，却没关原生验证 —— 用户仍看不到自定义错误提示，反而被原生提示打断流程。
立即学习“前端免费学习笔记（深入）”；
- 正确组合：
<form novalidate onsubmit="handleSubmit(event)"></form>，然后在handleSubmit里做 JS 校验 - 如果不用
novalidate，又想完全接管，得把提交按钮改成<button type="button"></button>，再手动触发逻辑 -
input或blur事件中调用preventDefault()没有意义 —— 那些事件不触发表单验证
checkValidity() 和 reportValidity() 的区别
这两个 API 常被混淆。它们都不阻止提交，只是主动触发验证逻辑：
-
element.checkValidity()：只返回true/false，不显示任何 UI 提示 -
element.reportValidity()：返回true/false，且会像用户点击提交一样，触发浏览器默认错误提示（含高亮和气泡） - 对整个表单调用：
form.checkValidity()会检查所有带验证约束的字段，但不会报错；form.reportValidity()才会统一展示所有问题 - 注意：
reportValidity()在novalidate表单里依然有效 —— 它不依赖表单属性，只依赖字段自身的约束属性（如required）
为什么禁用后仍有红框或伪类样式
:valid / :invalid / :user-invalid 这些 CSS 伪类，不随 novalidate 改变行为。只要字段有约束属性（如 required），浏览器就会持续计算其有效性状态。
也就是说，禁用的是“提交拦截”和“错误提示”，不是“样式计算”。如果你发现禁用验证后输入框还是红的，大概率是 CSS 里写了 input:invalid { border-color: red; }。
- 解决办法一：用更具体的权重覆盖，比如
form[novalidate] input:invalid { border-color: initial; } - 解决办法二：改用
:user-invalid—— 它只在用户交互后（如输完失焦）才生效，比:invalid更贴近真实反馈时机 - 别依赖
form.checkValidity()的返回值去切 CSS 类 —— 它不触发重绘，得手动classList.toggle
真正要绕开整套原生验证机制，关键不在 JS 事件阻止，而在从 form 属性和 CSS 响应逻辑两个层面同步切断。漏掉任意一环，都可能出现“以为关了，其实还在闪红框”的情况。
