novalidate 仅禁用浏览器默认校验，不替代JS验证逻辑；需手动监听submit、调用checkValidity、setCustomValidity并处理UI与无障碍；reportValidity仍会触发气泡，form.checkValidity仅返回布尔值。
novalidate 不是 JS 引擎，它只是个开关：告诉浏览器“别自动校验、别弹气泡、别拦提交”，把控制权让出来——剩下的验证逻辑、错误收集、状态同步、UI 反馈，全得你自己用 JS 写。
为什么不能只加 novalidate 就完事
加了 novalidate 后，required、type="email"、pattern 这些属性依然在 DOM 里，但浏览器不再主动检查它们。问题在于：
- 用户点提交按钮，页面会直接刷新或跳转（除非你手动
e.preventDefault()） -
input.validity对象仍可读，但:invalid伪类还在计算，CSS 红边框可能误显 - 屏幕阅读器仍会读
required，但没错误提示，无障碍体验断裂 - 如果你没实现任何 JS 校验，表单就等于“裸奔”——空邮箱、乱输手机号都能发出去
接管校验必须做的三件事
不是写个 validateForm() 函数就叫“接管”，得覆盖完整链路：
- 监听
submit事件并调用e.preventDefault()，否则表单照常提交 - 遍历所有带校验语义的字段（如含
required、type="email"、pattern的input），逐个调用input.checkValidity()并收集input.validationMessage或自定义文案 - 对每个字段执行
input.setCustomValidity('')清空旧状态，再根据规则设新错误（如input.setCustomValidity('密码需含数字')），否则checkValidity()结果不准
form.checkValidity() 和 form.reportValidity() 的区别
这两个 API 在 novalidate 表单里行为完全不同：
-
form.checkValidity()：只返回布尔值，不触发 UI，适合做条件判断（如if (form.checkValidity()) { submitData() }） -
form.reportValidity()：即使有novalidate，它仍会强行弹出原生气泡提示——这通常是你想避免的，调试时才临时用 - 常见坑：
reportValidity()调用后，字段的validity.customError可能被重置，导致后续 JS 校验失效
容易被忽略的兼容性细节
看似简单的属性，实际在不同场景下表现不一：
- React/Vue 中写
noValidate（驼峰）会被框架转成novalidate，但 SSR 或动态插入 HTML 时若拼错，DOM 里根本没这个属性 -
formnovalidate按钮点击时跳过校验，但用户按回车仍走form级设置——别以为加了它就万事大吉 - 移动端 Safari 对
novalidate响应有微小延迟，极少数情况下首次提交仍闪现气泡，可加setTimeout(() => form.submit(), 0)避免 -
input.willValidate属性在 IE8+ 存在，但值为false不代表“不支持校验”，只代表该字段被显式禁用（如input.willValidate = false），和novalidate无关
