用事件机制实现表单实时校验，核心是监听input（推荐）和blur（兜底）事件，避免仅用keyup/keydown；结合正则规则、classlist切换、aria属性、防抖控制及原生表单约束，兼顾体验、性能与可访问性。
用事件机制实现表单输入实时格式校验，核心是监听用户输入过程中的关键事件，在不打断操作的前提下即时反馈校验结果。重点不是等提交才检查，而是在输入时就响应变化。
监听合适的输入事件
不同场景应选不同事件，避免漏判或误判：
- input：最推荐，只要输入内容变化（包括粘贴、删除、输入法组合中）就触发，覆盖所有编辑行为
- blur：失焦时兜底校验，补全 input 可能遗漏的边界情况（如鼠标拖选后右键粘贴未触发 input）
- 避免只用 keyup/keydown：无法捕获鼠标粘贴、剪切板操作、自动填充、语音输入等非键盘行为
定义清晰的校验规则与反馈方式
校验逻辑要轻量、可复用，反馈要直观不干扰：
- 手机号校验可用
/^1[3-9]\d{9}$/，邮箱用/^[^\s@]+@[^\s@]+\.[^\s@]+$/，但注意正则别过度复杂（如邮箱 RFC 标准极难全覆盖，业务够用即可） - 不要只改文字提示，同步操作 input 元素的
classList（如添加valid/invalid类），配合 CSS 控制边框颜色、图标状态 - 错误信息用
aria-invalid和aria-describedby保障读屏器可访问
防抖与性能控制
高频输入下避免重复计算影响体验：
- 对实时性要求不高的校验（如密码强度、长文本语义检查），用 300ms 防抖，防止每敲一个字都执行正则和 DOM 更新
- 手机号、邮箱等基础格式校验本身极快，可直接在 input 中执行，无需防抖
- 避免在事件回调里频繁 querySelector 或修改样式——缓存 DOM 引用，用 class 切换代替内联 style
结合原生表单约束增强可靠性
利用浏览器原生能力减少重复工作：
- 给 input 加
type="email"、type="tel"、pattern、required属性，触发表单原生验证 UI（如红色边框、:valid/:invalid 伪类） - 用
checkValidity()和setCustomValidity()扩展原生校验逻辑，保持 submit 时统一调用路径 - 监听
form的submit事件做最终拦截，即使用户绕过实时校验也能守住底线
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
