如何在 HTML 表单中通过 novalidate 属性禁用浏览器的默认表单验证-html教程-PHP中文网

novalidate 必须写在标签上才能禁用原生验证，它仅关闭自动校验和 ui 反馈，但保留 checkvalidity() 等 api 和表单语义；需手动调用并配合 e.preventdefault() 控制提交逻辑。

如何在 html 表单中通过 novalidate 属性禁用浏览器的默认表单验证

直接在 <form></form> 标签上写 novalidate 就能禁用全部原生验证，但加了它之后表单提交不再被拦截、气泡不弹、红边框不亮——这不等于“没验证”，只是浏览器把校验控制权交给你了。

上，其他地方都无效

很多人试过给 <input> 或 <button></button> 加 novalidate，结果提交时照样报错。浏览器只认 <form novalidate></form> 这一种写法：

✅ 正确：<form novalidate> <input required type="email"><button type="submit">提交</button> </form>
❌ 错误：<input novalidate required>、<button novalidate></button>、<form novalidate="false"></form>（布尔属性有即真，赋值反而误导）
⚠️ 注意：React 中要写成 noValidate（驼峰），否则 JSX 不透传；Vue 模板里直接写 novalidate 即可，但用 v-bind:novalidate 时得写成 :novalidate="true"

它只关掉“自动触发”，不删底层能力。以下行为依然有效，但需要你手动调用：

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

form.checkValidity() 仍返回 false，可用于条件判断
input.reportValidity() 仍会弹原生气泡（调试时有用，线上慎用）
input.setCustomValidity('') 配合 input.checkValidity() 可重置状态，否则样式可能卡在 :invalid
required、type="email"、pattern 等属性保留——语义、移动端键盘类型、读屏器识别都不受影响

但 :valid/:invalid 伪类不再实时更新：填完内容后边框颜色不会自动从红变绿，得靠 JS 主动加 class 控制样式。

加了 novalidate 后，浏览器不拦提交，但你的 JS 事件监听器如果没写 e.preventDefault()，表单仍会按默认方式发请求——可能跳转、刷新、或发到错误 endpoint：

监听 submit 事件时，必须显式写 e.preventDefault()
若用 fetch 或 axios 提交，novalidate 只是让数据能发出去，不代表后端能接受——后端校验一点都不能少
多个提交入口（比如回车、JS 调用 form.submit()、多个按钮）都会绕过验证，formnovalidate 只对单个按钮生效，且 Safari 兼容性差，别依赖它做关键路径

真正容易被忽略的是：加了 novalidate 后，ValidityState 对象还在计算，但 UI 和 CSS 伪类不同步——你得自己管状态同步，而不是指望浏览器替你刷新样式。