input事件最稳妥，需配合300ms节流、只更新提示文案不干扰输入、提交前全量校验并聚焦首错字段。
表单输入时触发校验的时机选哪个？
用 input 事件最稳妥，它在每次输入（包括粘贴、删除、键盘输入）后立即触发。别用 change，它只在失焦后才触发，用户根本看不到实时反馈。移动端尤其要注意：input 能覆盖软键盘输入、语音输入、粘贴等所有路径；而 keydown 会漏掉鼠标粘贴和自动填充。
-
input是默认首选，兼容性好（IE9+） - 如果要兼容 IE8，得降级用
propertychange（仅 IE），但现代项目基本不用考虑 - 避免监听
blur做“实时”反馈——那已经不是实时了
怎么避免校验太频繁导致卡顿？
直接在 input 里写校验逻辑，用户狂敲键盘时会一秒触发十几次，尤其正则匹配或 DOM 操作多时，页面会明显卡顿。必须加节流。
- 用
setTimeout+clearTimeout实现简易节流，延迟 300ms 执行校验（300是经验值，太快易误判，太慢感知迟钝） - 不要用
debounce库或复杂封装，原生几行就能搞定 - 注意：节流只控制执行频率，校验逻辑本身要轻量——比如邮箱用
/^[^\s@]+@[^\s@]+.[^\s@]+$/就够，别调接口或遍历大数组
let timer;
element.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => validateField(element), 300);
});
校验失败时，DOM 更新怎么不干扰用户输入？
常见错误是校验后直接清空 value 或重置 focus，用户正在输手机号，突然光标跳到开头或内容被删，体验极差。反馈要“不打断”。
- 只操作提示文案（
span.error-message）和样式（比如加is-invalidclass），绝不碰value、selectionStart、focus() - 错误提示用
aria-live="polite"保证读屏器可读，但别用assertive，否则会打断语音播报 - 如果用
setCustomValidity()，记得校验通过后调用setCustomValidity('')清空，否则表单始终 invalid
提交前还要再校验一次吗？
要。用户可能绕过输入过程（比如直接粘贴非法值后点提交），或禁用 JavaScript 后手动改 DOM。所以 submit 事件里必须做全量校验，且不能只依赖前端结果。
立即学习“前端免费学习笔记（深入）”；
- 在
form.addEventListener('submit', e => { ... })中遍历所有必填字段，逐个调用校验函数 - 校验失败时
e.preventDefault()，然后聚焦第一个出错字段（field.focus()），别只弹 alert - 后端永远要做相同校验——前端校验纯为体验，不是安全防线
真实场景里，节流时机、DOM 更新边界、submit 时兜底这三点，漏掉任何一个都会让“实时”变成“假实时”或者“反人类”。
