blur负责用户完成输入后的语义校验，change负责dom状态变更时的同步更新；二者协同实现准确自然的表单校验体验。
表单校验中，change 和 blur 事件的分工直接影响用户是否觉得“被催促”或“被忽略”。关键不是选一个，而是让它们各司其职：blur 负责语义确认，change 负责状态同步，两者配合才能既准确又自然。
change 事件适合做“有效性快照”，不是实时反馈主渠道
它在输入值真正改变且失焦后才触发（对 <input> 来说），比 input 更稳、比 blur 更早暴露变更意图。
- 它天然规避了 input 中频繁触发带来的抖动问题，也避开了 blur 中“刚点进来就离开”的误判
- 主要用途是更新 validity 状态、清理旧错误、同步 disabled/required 等依赖值变化的逻辑
- 例如：切换复选框时启用/禁用关联字段，选择“其他”选项后显示补充输入框
blur 事件才是用户完成单字段输入的明确信号
用户移开焦点，代表“我填完了，你来核一下”。这是做格式校验、必填检查、跨字段比对（如密码确认）最合理的时机。
- 校验前先判断
value.trim() !== ''，避免空值误报 - 对需异步验证的字段（如用户名唯一性），blur 触发请求，同时加 loading 状态并防重复点击
- 错误提示紧贴字段下方，不打断后续操作；成功时可加绿色对勾图标强化正向反馈
二者协同的典型流程示例
以邮箱字段为例：
- 用户输入过程中：监听 input 做轻量标记（如长度不足时加
class="pending"，不报错） - 用户离开邮箱框（blur）：执行完整校验（非空 + 格式正则），失败则标红并写入错误文本
- 用户修改后再次失焦（change 触发）：自动调用
setCustomValidity('')清空上一次错误，再跑一遍checkValidity()更新状态
避免常见失衡陷阱
- 不要用 change 替代 blur 做主校验：change 在移动端可能延迟触发，导致用户已提交却未校验
- 不要在 blur 中做耗时操作（如无节流的正则匹配长文本），应提前在 input 中防抖或降级为简单规则
- 不要忽略 change 对
<select></select>、<textarea></textarea>、复选框等控件的关键作用——它们没有 input 事件，change 是唯一可靠变更信号
本质上，blur 是“用户说：我好了”，change 是“DOM 说：我变了”。校验逻辑该听谁的？听用户的，但信 DOM 的状态。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
