最彻底禁用HTML5表单默认验证的方式是在标签添加novalidate属性，它全局关闭所有原生校验（如required、type、pattern），但不影响JS手动调用checkValidity()等方法；而oninvalid+preventDefault()仅阻止提示弹窗，不改变元素内在校验状态，易干扰JS联动逻辑。
怎么彻底禁用 HTML5 表单默认验证
直接在 标签上加 novalidate 属性，这是最干净、最可靠的方式。它会关闭该表单内所有原生验证行为（包括 required、type="email"、pattern 等触发的提示），且不影响 JS 手动调用 checkValidity() 或 reportValidity()。
常见错误是只给单个 加 formnovalidate —— 这仅对提交按钮生效，且只影响当前按钮点击时的校验，无法“全局禁用”。
示例：
为什么 oninvalid + preventDefault 不算真正禁用
有人用 oninvalid="event.preventDefault();" 拦截冒泡，或给所有 input 绑定 addEventListener('invalid', e => e.preventDefault())。这只能阻止浏览器默认弹窗，但 checkValidity() 仍返回 false，:valid/:invalid 伪类照常切换，CSS 样式和 JS 逻辑可能意外触发。
立即学习“前端免费学习笔记（深入）”；
本质是“掩盖症状”，不是“停用机制”。尤其在多字段联动场景（如密码与确认密码比对、日期范围交叉校验）中，这些被隐藏的校验状态会干扰你自己的 JS 校验流程。
要点：
-
novalidate是声明式开关，一劳永逸 -
preventDefault()是运行时拦截，不改变元素内在 validity 状态 - 若需保留部分校验（如只关
required但留pattern），必须手动清除属性或用 JS 控制，不能靠事件拦截
多字段联动校验必须自己写 JS 的原因
HTML5 原生验证是单字段独立运行的， 完全不知道 的值。所谓“联动”，比如“两次输入不一致就标红”，必须靠 JS 监听变化、手动比对、调用 setCustomValidity() 来注入错误信息。
关键点：
- 联动逻辑必须绑定在至少一个字段的
input或blur事件上 - 每次比对后，要对两个字段都调用
setCustomValidity("")清空旧状态，再对出错字段设新错误 - 不要依赖
submit事件做唯一校验入口——用户可能用 Tab 切换、鼠标点击等非 submit 方式触发验证
示例（简化）：
const pwd = document.querySelector('[name="password"]')
const conf = document.querySelector('[name="confirm"]')
conf.addEventListener('input', () => {
if (conf.value !== pwd.value) {
conf.setCustomValidity('两次输入不一致')
} else {
conf.setCustomValidity('')
}
})
容易被忽略的兼容性与副作用
novalidate 在所有现代浏览器中完全支持，包括 iOS Safari 10.3+ 和 Android Chrome。但它不会移除 required 等属性，只是让它们失效——这意味着：如果后续 JS 逻辑读取 element.required 或检查 element.attributes.required，值仍是 true，别误以为属性被删了。
更隐蔽的问题是移动端软键盘行为：type="email" 或 type="tel" 即使加了 novalidate，依然会唤起对应键盘，这是 type 属性本身的作用，和验证无关。若想连键盘也统一成文本键盘，得改 type="text" 并自行处理格式逻辑。
最后提醒：禁用原生验证 ≠ 放弃服务端校验。所有客户端逻辑都可绕过，关键字段（如邮箱、手机号、密码强度）必须在后端重复验证。
