novalidate属性可全局禁用表单原生校验,formnovalidate则针对单个提交按钮,二者均不干扰checkValidity()等API调用及JavaScript手动校验逻辑。
form 标签加 novalidate 属性最直接
浏览器默认会在提交时触发内置校验(比如 required、type="email"),只要在 标签上加上 novalidate 属性,整个表单就跳过所有 HTML5 原生验证逻辑,包括视觉提示(红边框)、错误弹窗和阻止提交行为。
注意:novalidate 是布尔属性,写成 novalidate="novalidate" 也行,但只写 novalidate 更标准;它不影响 JavaScript 手动调用的 checkValidity() 或 reportValidity()。
- 适用于整表单临时禁用,比如调试阶段或与第三方校验库共存时
- 不会影响
input的value获取或事件绑定 - 若同时用了
formnovalidate在某个提交按钮上,该按钮会忽略novalidate,优先走自己的逻辑
submit 事件里调用 event.preventDefault()
这是更灵活的控制方式:保留原生校验字段(比如仍显示 :valid/:invalid 状态),但由 JS 完全接管提交流程。关键是在监听 submit 事件时第一时间调用 preventDefault(),否则浏览器会在事件冒泡前就执行校验并可能中断流程。
示例:
立即学习“前端免费学习笔记(深入)”;