setCustomValidity本身不触发验证，仅设置错误提示；验证由表单提交、blur或显式调用checkValidity/reportValidity触发；实时校验需监听input事件，先清空再设值，并依赖浏览器自动更新validity状态和伪类。
setCustomValidity 为什么在输入过程中不触发验证
因为 setCustomValidity 本身不触发验证，它只设置验证失败时的提示文本；浏览器默认只在表单提交、或元素失去焦点（blur）、或显式调用 checkValidity() / reportValidity() 时才执行验证逻辑。输入过程中的实时校验必须手动驱动。
如何让 input 实时触发 setCustomValidity 校验
核心是监听输入事件并主动调用验证方法，不能只靠绑定 oninput 或 onkeyup 后调用 setCustomValidity 就完事——那只是设了错误信息，没触发 UI 反馈（比如红框、伪类 :invalid）。
- 监听
input事件（比keyup更可靠，覆盖粘贴、自动填充等场景） - 在回调中先清除旧状态：
element.setCustomValidity('')（空字符串表示有效） - 再根据业务逻辑判断是否非法，非法时调用
element.setCustomValidity('错误提示') - 最后必须调用
element.reportValidity()—— 但注意：这个方法会弹出原生提示框，不适合纯 UI 反馈；如只需视觉更新（比如加红边），改用element.checkValidity()+ 手动控制 class 或 aria 属性
示例：
<input type="email" id="email">
<script>
const emailInput = document.getElementById('email');
emailInput.addEventListener('input', () => {
const value = emailInput.value.trim();
// 先清空自定义错误，避免残留
emailInput.setCustomValidity('');
if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
emailInput.setCustomValidity('请输入有效的邮箱地址');
}
// 触发 :valid/:invalid 伪类更新（无需 reportValidity）
// 浏览器会在 setCustomValidity 后自动重算 validity 状态
});
</script>
常见坑：setCustomValidity('') 不生效或状态滞后
根本原因是 validity 状态缓存和事件时机问题。尤其在快速连续输入、或配合 Vue/React 等框架时容易出错。
立即学习“前端免费学习笔记（深入）”；
- 未在每次输入前调用
setCustomValidity('')，导致旧错误信息残留，:invalid伪类持续存在 - 在
input中直接写setCustomValidity('错误')但没清空过，后续即使输入合法，状态也不会恢复 - 使用
change事件代替input，漏掉中间态校验（比如用户还没离开输入框就已输错） - 在 React 中直接操作 DOM 的
setCustomValidity，但未同步更新组件内部 state，造成视图与 validity 状态不一致
兼容性与性能注意点
setCustomValidity 在所有现代浏览器中支持良好（IE10+），但行为细节有差异：
- Chrome/Firefox：调用
setCustomValidity后立即更新element.validity.valid和伪类，无需额外触发 - Safari（尤其是旧版本）：有时需配合
element.checkValidity()才能强制刷新样式 - 高频
input事件下频繁调用正则校验可能卡顿，对长文本或复杂规则建议加防抖（但注意：防抖会延迟反馈，影响实时性）
真正关键的不是“怎么写”，而是始终记住：validity 是元素的内在状态，setCustomValidity 是修改它的手段，而浏览器是否重绘、是否显示错误，取决于你有没有把它置于一个被监听的上下文里——比如表单提交、focus/blur、或你主动调用 checkValidity。
