novalidate 必须写在 <form> 标签上才能禁用原生验证，它仅关闭自动校验和 UI 反馈，但保留 checkValidity() 等 API 和表单语义；需手动调用并配合 e.preventDefault() 控制提交逻辑。
直接在 <form> 标签上写 novalidate 就能禁用全部原生验证，但加了它之后表单提交不再被拦截、气泡不弹、红边框不亮——这不等于“没验证”，只是浏览器把校验控制权交给你了。
novalidate 必须写在 <form> 上，其他地方都无效
很多人试过给 <input> 或 <button> 加 novalidate，结果提交时照样报错。浏览器只认 <form novalidate> 这一种写法：
- ✅ 正确：
<form novalidate><input required type="email"><button type="submit">提交</button></form> - ❌ 错误：
<input novalidate required>、<button novalidate>、<form novalidate="false">（布尔属性有即真，赋值反而误导） - ⚠️ 注意：React 中要写成
noValidate（驼峰），否则 JSX 不透传；Vue 模板里直接写novalidate即可，但用v-bind:novalidate时得写成:novalidate="true"
加了 novalidate 后，哪些东西还起作用？
它只关掉“自动触发”，不删底层能力。以下行为依然有效，但需要你手动调用：
-
form.checkValidity()仍返回false，可用于条件判断 -
input.reportValidity()仍会弹原生气泡（调试时有用，线上慎用） -
input.setCustomValidity('')配合input.checkValidity()可重置状态，否则样式可能卡在:invalid -
required、type="email"、pattern等属性保留——语义、移动端键盘类型、读屏器识别都不受影响
但 :valid/:invalid 伪类不再实时更新：填完内容后边框颜色不会自动从红变绿，得靠 JS 主动加 class 控制样式。
立即学习“前端免费学习笔记（深入）”；
别漏掉 event.preventDefault()，否则提交逻辑会失控
加了 novalidate 后，浏览器不拦提交，但你的 JS 事件监听器如果没写 e.preventDefault()，表单仍会按默认方式发请求——可能跳转、刷新、或发到错误 endpoint：
- 监听
submit事件时，必须显式写e.preventDefault() - 若用
fetch或axios提交，novalidate只是让数据能发出去，不代表后端能接受——后端校验一点都不能少 - 多个提交入口（比如回车、JS 调用
form.submit()、多个按钮）都会绕过验证，formnovalidate只对单个按钮生效，且 Safari 兼容性差，别依赖它做关键路径
真正容易被忽略的是：加了 novalidate 后，ValidityState 对象还在计算，但 UI 和 CSS 伪类不同步——你得自己管状态同步，而不是指望浏览器替你刷新样式。
