input事件比blur事件更适合实时校验，因其在每次输入（含粘贴、删除、ime上屏后）均触发；keyup无法捕获粘贴及ime中间状态，易漏检；绑定input事件即可，无需额外监听change或paste。
input事件比blur事件更适合实时校验
实时校验的核心是“用户每敲一个键就检查”，而不是等失焦才触发。用 blur 会延迟反馈，用户可能已经提交了错误内容；而 input 事件在每次输入（包括粘贴、删除、中文输入法上屏后）都会触发，更符合“实时”定义。
注意：不要用 keyup —— 它捕获不到鼠标粘贴、拖入文本、或 IME（中文输入法）未完成时的中间状态，容易漏检。
- 对
<input>、<textarea></textarea>绑定input事件即可，无需额外监听change或paste - 若需兼容旧版 IE（propertychange，但现代项目基本不用考虑
- 避免在
input回调里直接调用耗时操作（如发请求），可加setTimeout或requestIdleCallback防抖
正则校验要区分场景和边界条件
邮箱、手机号、密码强度等常见规则，不能只靠一个“万能正则”。比如邮箱校验用 /^.+@.+\..+$/ 看似简单，但会放过 a@b.c 这类明显非法格式；而过度严格的 RFC 5322 正则又难维护、性能差。
实际建议分层处理：
- 基础格式用轻量正则快速过滤（如
/^[^\s@]+@[^\s@]+\.[^\s@]+$/） - 关键字段（如注册邮箱）在提交前再调后端验证，前端正则仅作体验优化
- 中文手机号要单独处理：大陆用
^1[3-9]\d{9}$，但港澳台或国际号需留扩展位，别硬编码成“必须11位” - 密码校验别只数长度，用
/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/检查字符类型组合，但别强制特殊符号——很多用户根本打不出
显示错误提示时别破坏用户输入焦点和滚动位置
常见错误是校验失败后，用 element.focus() 把光标强行拉回，或用 scrollIntoView() 跳转，导致用户正在填的下一个字段被盖住、输入法中断、甚至误触其他按钮。
- 错误提示用
aria-live="polite"区域异步播报，兼顾无障碍和不打断操作 - 样式上用颜色+图标变化（如边框变红、右侧加 ❌），而非弹
alert或覆盖层 - 如果清空了输入框内容（比如邮箱格式错自动清空），一定要保留用户刚输的值——这是典型反模式
- 表单有多个字段时，避免所有字段同时高亮错误，优先聚焦第一个出错项，其余用弱提示
防抖不是可选项，是必选项
用户快速连按或长按输入时，input 事件会高频触发。不做节流，可能导致正则反复执行、接口重复请求、或 DOM 频繁重绘，尤其在低端安卓机上卡顿明显。
- 简单防抖可用
setTimeout+clearTimeout，延迟 300ms 再执行校验逻辑 - 若校验依赖服务端（如用户名是否已存在），必须加防抖，否则同一词连续发 5 次请求纯属浪费
- 注意：防抖不能取消用户最后一次输入的反馈——要在 clearTimeout 后确保至少执行一次最终值校验
- 别用 Lodash 的
debounce直接包整个事件回调，它可能延迟错误提示，改用手动控制更稳妥
最麻烦的其实是中文输入法场景：用户敲“zhong”，还没选字就触发了 input，此时值是拼音，校验必然失败。得监听 compositionstart 和 compositionend 临时暂停校验，这个细节八成开发者会忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
