input适合实时响应输入，change适合失焦后校验；input高频触发需防抖，change依赖blur且值变更才触发；推荐分层策略：input做轻量反馈，change或防抖后做强校验。
表单校验中，input适合实时响应输入（如边输边验、字数统计、格式预提示），change适合“失去焦点后”或“值真正改变后”再校验（如提交前最终确认、避免频繁触发）。
input事件：捕获每一次输入变化
只要输入框内容发生改变（包括键盘输入、粘贴、剪切、删除、甚至中文输入法未上屏时的拼音），就会触发。适合需要即时反馈的场景。
- 监听时机早：用户按下一个键就触发，无需等待 blur 或回车
- 注意性能：高频触发，校验逻辑应轻量；可加防抖（如延迟300ms再执行校验）避免过度计算
- 对中文输入法兼容性好：即使用户还在选词，input 也会在输入法上屏后触发（现代浏览器已优化）
- 示例：邮箱格式实时提示（输入
a@就标黄，输入完整a@b.c再变绿）
change事件：只在“值确定后”触发
仅当元素失去焦点（blur）且值相比聚焦前发生了变化时才触发。不会在每次按键时响应，更“节制”。
- 适用于最终确认类校验：比如用户填完手机号后点到下一个框，再校验格式和合法性
- 不触发于中间状态：复制粘贴后没失焦？不触发；输入中途删掉又重输？只要最终值没变，也不触发
- 对 type="checkbox"/"radio" 更自然：选中/取消时立即触发，无需失焦
- 注意：select、textarea、普通 input 都依赖 blur + 值变更两个条件
如何结合使用实现合理实时校验
单一用 input 容易过载，只用 change 又反馈滞后。推荐分层策略：
立即学习“Java免费学习笔记（深入）”；
- 视觉轻反馈用 input：比如输入长度、必填项是否为空、基础格式（如邮箱含 @ 符号）——简单判断，不发请求
- 强校验或异步校验用 change：如用户名是否已存在、手机号是否合法（需调 API）、密码强度最终评估——减少请求数，避免干扰用户输入节奏
- 也可搭配
input+ 防抖 +change回退：例如 500ms 内无新输入则校验，若用户快速输完直接失焦，则 change 作为兜底
一个实用校验组合写法
以邮箱为例：
const emailInput = document.getElementById('email');
let timer;
emailInput.addEventListener('input', () => {
clearTimeout(timer);
const value = emailInput.value.trim();
// 轻量级格式初筛（仅正则）
if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
emailInput.setCustomValidity('邮箱格式不正确');
} else {
emailInput.setCustomValidity('');
}
// 防抖发起真实校验（如查重）
timer = setTimeout(() => {
if (value.includes('@')) {
checkEmailExists(value); // 异步请求
}
}, 500);
});
emailInput.addEventListener('change', () => {
// 最终校验，确保提交前状态准确
if (emailInput.value && !emailInput.checkValidity()) {
showErrorMessage('请检查邮箱格式');
}
});
