IE10/11原生表单验证不触发提交拦截和提示气泡,需用formnovalidate+checkValidity()手动校验,并在input/blur事件中调用setCustomValidity('')重置状态,否则验证锁定。

IE10+ 为什么 required、type="email" 等验证不触发
IE10 和 IE11 原生支持部分 HTML5 表单属性,但默认行为和现代浏览器有关键差异:它们**不会在提交时自动阻止表单提交并显示原生提示气泡**,即使 DOM 中写了 required 或 type="email"。这不是“失效”,而是“未激活验证 UI”——底层约束仍存在(可通过 checkValidity() 检测),但用户看不到反馈,也拦不住 submit。
用 formnovalidate 和手动 checkValidity() 强制触发
必须放弃依赖原生气泡,改用 JavaScript 主动校验 + 自定义提示。核心是两步:
- 给提交按钮加
formnovalidate属性,防止 IE 自行尝试(它会静默失败) - 绑定
submit事件,调用form.checkValidity(),返回false阻止提交 - 对返回
false的字段,用setCustomValidity()或 DOM 操作添加提示
setCustomValidity('') 是绕过 IE 验证锁定的关键
IE 在字段触发过一次 invalid 事件后,若未调用 setCustomValidity('') 清空自定义错误,后续 checkValidity() 会持续返回 false,即使用户已填入合法值。这是最常被忽略的坑。
- 所有带验证逻辑的
input必须监听input或blur事件 - 在事件处理中调用
input.setCustomValidity('')重置状态 - 仅在真正不合法时调用
input.setCustomValidity('邮箱格式不对')
兼容性底线:别信 placeholder 和伪类样式
IE10/11 对 :valid、:invalid 伪类支持极差(尤其动态变化时),placeholder 也不触发 invalid 事件。不要靠 CSS 控制验证态,全部收归 JS 判断。
立即学习“前端免费学习笔记(深入)”;
- 用
input.validity.valid替代:validCSS 类 - 用
input.value.trim() === ''判断空值,而非依赖required的视觉反馈 - 服务器端验证不可省——IE 的任何客户端补丁都只是体验优化
真正麻烦的不是写几行 JS,而是每个验证字段都要手动 reset + validate + focus,而且得在 input、blur、submit 三个时机反复同步状态。稍漏一个 setCustomValidity(''),整个表单就僵在错误态里出不来。










