novalidate 属性必须加在 标签上才有效，用于全局禁用原生验证；加在 或 上无效；局部禁用需移除验证属性或用 javascript 处理。
novalidate 属性加在哪儿才有效
必须加在 <form></form> 标签上，不是加在 input 或 button 上。浏览器只认表单级的开关，加错位置完全没用。
-
<form novalidate></form>✅ 全局禁用所有原生验证（包括required、type="email"、pattern等） -
<form novalidate="novalidate"></form>✅ 效果相同，布尔属性写法可简可全 -
<input novalidate>❌ 无效，HTML 规范不支持该属性出现在表单控件上 -
<button type="submit" novalidate></button>❌ 同样无效
想局部禁用验证？novalidate 不行，得换思路
novalidate 是全有或全无的开关，没法只关掉某个字段的验证。如果只想绕过某几个输入项的校验，常见做法是：
- 移除对应
input的required、pattern、min/max等验证属性 - 用 JavaScript 在提交前调用
setCustomValidity('')清空特定字段的自定义错误 - 把不想验证的字段临时设为
disabled（注意：disabled 字段值不会提交） - 改用
type="text"替代type="email"或type="url"，放弃类型级校验
JavaScript 提交时仍触发验证？检查是否漏了 novalidate
即使用了 form.addEventListener('submit', e => e.preventDefault())，只要没加 novalidate，调用 form.reportValidity() 或用户手动聚焦后失焦，依然会弹原生提示。典型误判场景：
- 以为阻止 submit 事件就够了 → 实际浏览器会在 blur、checkValidity()、reportValidity() 时主动触发验证
- 动态生成表单但忘了在 JS 插入时带上
novalidate属性 - 服务端渲染后前端再 patch 表单，覆盖掉了原有
novalidate - 框架（如 React）中用
noValidate（驼峰）写法 → HTML 属性名必须是小写novalidate，React 里要写成noValidate才能透传，但最终 DOM 必须是小写
兼容性与副作用提醒
novalidate 是 HTML5 标准属性，所有现代浏览器都支持，IE10+ 也 OK。但要注意两个隐蔽影响：
立即学习“前端免费学习笔记（深入）”；
- 禁用后，
:valid/:invalidCSS 伪类不再响应状态变化，样式逻辑需重构 - 部分屏幕阅读器依赖原生验证消息做无障碍提示，关掉后需用
aria-invalid+aria-describedby手动补全 - 移动端键盘类型可能受影响：比如
type="email"原本唤起带 @ 键的键盘，禁用验证不等于禁用类型语义，但若同时改成type="text"就真没了
实际项目里最容易被忽略的，是混合使用 JS 验证和原生验证时对 novalidate 的“存在感”预估不足——它不声不响，但一旦缺位，就会在某个 blur 或 reportValidity 调用时刻突然弹出提示，打断用户流程。
