实时验证应优先使用input事件而非blur或keyup，因其覆盖所有输入方式；需结合防抖（200ms）、语义化属性（aria-invalid等）及场景化正则，兼顾性能、无障碍与用户体验。
input事件监听比blur更早触发验证
实时验证的核心是“用户每输一个字符就检查”，input事件正好满足这点——它在输入框内容变化时立即触发，包括键盘输入、粘贴、拖放甚至语音输入。而blur只在失焦时触发，已错过大部分交互时机。
常见错误现象：blur下用户输完一整串邮箱才提示“格式错误”，体验断层；或用keyup漏掉鼠标粘贴、剪贴板修改等场景。
- 始终优先绑定
input事件，不是change（后者只在失焦+值改变时触发） - 对
contenteditable元素或富文本输入框，需额外监听input+compositionend（处理中文输入法上屏） - 移动端要注意：部分安卓浏览器对
input事件有轻微延迟，可加setTimeout(..., 0)确保队列清空
正则校验别硬套通用邮箱/手机号模板
直接复制网上“万能邮箱正则”大概率导致误判——比如test+tag@example.com是合法邮箱但被拦，或138****1234这种脱敏格式被当成有效手机号。
使用场景决定校验粒度：注册页要严格（防机器人），搜索框只需基础格式（防空或明显乱码）。
立即学习“前端免费学习笔记（深入）”；
- 邮箱用
/^[^s@]+@[^s@]+.[^s@]+$/足够覆盖99%真实输入，不追求RFC 5322全兼容 - 手机号按目标国家写死前缀，比如中国用
^1[3-9]d{9}$，别用^d{11}$（会放过00000000000） - 密码强度建议分阶段提示：“长度6位” → “需含数字” → “需含大小写字母”，而不是一次性弹出全部规则
验证状态必须同步更新dom类名和aria属性
光改样式不改语义，等于没验证——屏幕阅读器看不到错误，自动化测试抓不到状态，CSS伪类:valid/:invalid也失效。
性能影响很小，但缺失会导致无障碍失败和E2E测试频繁挂掉。
- 每次验证后，同步设置
input的aria-invalid（"true"/"false"）和aria-describedby（指向错误提示ID） - 用
classList.toggle("Error", !isValid)控制类名，避免手动拼接字符串 - 不要仅靠
style.borderColor = "red"标记错误——无CSS时完全不可见，且无法被js检测
防抖不是可选项，是必选项
用户快速连打时，input事件每秒可能触发10+次，若每次调用API或执行复杂正则，CPU飙升、响应卡顿、请求堆积，尤其在低配安卓机上明显。
防抖时间设太短（如50ms）起不到作用，设太长（如500ms）又让反馈滞后。
- 推荐防抖阈值
200ms：平衡响应速度与资源消耗 - 对异步验证（如用户名是否已被注册），防抖必须作用于整个请求逻辑，不是只包正则
- 注意清除上一次定时器：
clearTimeout(timerRef)，否则旧回调可能覆盖新结果
最易被忽略的是：防抖后没处理“验证中”状态。用户输入停顿前看到的是上次结果，中间空白期应显示aria-busy="true"或加载态类名，否则会误以为验证失效。