17370845950

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

IE10+ 为什么 required、type="email" 等验证不触发

IE10 和 IE11 原生支持部分 HTML5 表单属性，但默认行为和现代浏览器有关键差异：它们**不会在提交时自动阻止表单提交并显示原生提示气泡**，即使 DOM 中写了 required 或 type="email"。这不是“失效”，而是“未激活验证 UI”——底层约束仍存在（可通过 checkValidity() 检测），但用户看不到反馈，也拦不住 subm

用 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 替代 :valid CSS 类
• 用 input.value.trim() === '' 判断空值，而非依赖 required 的视觉反馈
• 服务器端验证不可省——IE 的任何客户端补丁都只是体验优化

真正麻烦的不是写几行 JS，而是每个验证字段都要手动 reset + validate + focus，而且得在 input、blur、submit 三个时机反复同步状态。稍漏一个 setCustomValidity('')，整个表单就僵在错误态里出不来。