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 操作添加提示
<form id="myForm">
<input type="email" required name="email">
<button type="submit" formnovalidate>提交</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
if (!this.checkValidity()) {
e.preventDefault();
// 手动聚焦第一个无效字段（IE 不自动做）
const invalid = this.querySelector(':invalid');
if (invalid) invalid.focus();
return false;
}
});
</script>
setCustomValidity('') 是绕过 IE 验证锁定的关键
IE 在字段触发过一次 invalid 事件后，若未调用 setCustomValidity('') 清空自定义错误，后续 checkValidity() 会持续返回 false，即使用户已填入合法值。这是最常被忽略的坑。
- 所有带验证逻辑的
input必须监听input或blur事件 - 在事件处理中调用
input.setCustomValidity('')重置状态 - 仅在真正不合法时调用
input.setCustomValidity('邮箱格式不对')
<input type="email" id="email">
<script>
const email = document.getElementById('email');
email.addEventListener('input', function() {
// 先清空，否则 IE 会卡住
this.setCustomValidity('');
if (this.value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.value)) {
this.setCustomValidity('请输入有效邮箱');
}
});
</script>
兼容性底线：别信 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('')，整个表单就僵在错误态里出不来。
