oninput是唯一可靠的实时输入检测事件，onchange仅在失焦或回车后触发，无法满足实时性要求；它原生支持所有输入方式，覆盖现代浏览器及ie8+。
oninput 事件是唯一可靠的选择
用 onchange 做实时检测注定失败——它只在失焦或回车后触发，完全不符合“实时”要求。oninput 才是 HTML5 原生支持的、覆盖所有输入方式（键盘、粘贴、拖放、语音、自动填充）的事件。IE8+ 和所有现代浏览器都支持，无需 polyfill。
常见错误现象：
- 用
onkeyup替代：漏掉右键粘贴、中文输入法上屏、剪贴板粘贴等场景 - 监听
change还试图“实时”：用户还没松开键盘就已离开输入框，校验永远滞后 - 没加
type="text"或写成type="number"却期望捕获非数字字符：浏览器会静默过滤，event.target.value已被截断，拿不到原始输入
setCustomValidity 必须配合 input 事件手动清空
setCustomValidity 不是“触发验证”，它只是设置一个错误字符串；浏览器是否渲染 :invalid 伪类、是否显示红边，取决于当前元素的 validity.valid 状态——而这个状态不会自动刷新，必须靠你每次 input 时主动重置。
正确做法：
- 每次
input回调开头必须先调element.setCustomValidity('')，否则旧错误残留，:invalid一直挂着 - 再根据逻辑判断是否非法，非法时才设错误消息：
element.setCustomValidity('邮箱格式不对') - 不用调
reportValidity()——它会弹原生提示框，破坏 UI 流程；checkValidity()可读状态，但视觉更新靠浏览器自动响应setCustomValidity调用
防抖不是可选，而是必须加的性能底线
用户每敲一个键、每一次粘贴、甚至中文输入法每选一个字，都会触发 input。不做防抖，高频请求或复杂正则校验会直接卡死页面。
推荐用时间戳法，比 setTimeout + clearTimeout 更稳（避免闭包中引用过期 timer）：
let lastInputTime = 0;
inputElement.addEventListener('input', (e) => {
lastInputTime = e.timeStamp;
setTimeout(() => {
if (e.timeStamp === lastInputTime) {
// 此时确认用户已停顿，执行校验或请求
doValidate(e.target.value);
}
}, 300);
});
注意点：
- 不要用
debounce工具函数封装后直接传入事件监听器——容易丢失this或event上下文 - 300ms 是经验阈值，低于 200ms 用户感知不到延迟，高于 500ms 会有明显卡顿感
- 对纯格式清洗（如只留数字）可不防抖；但涉及正则匹配、Ajax 请求、DOM 更新，必须加
表格内多行 input 的校验必须隔离作用域
在 <table> 中动态增删行时，如果所有 <code><input> 都用相同 name 或硬编码 id，校验必然错乱：JS 拿不到当前行上下文，后端也收不到完整数据。
关键约束：
- 每行
<tr> 加 <code>data-row-id="0"、data-row-id="1"等唯一标识 - 行内
<input>的name带下标，如name="email-0"，避免表单提交时覆盖 - 用事件委托绑定到
<tbody>，通过 <code>event.target.closest('tr')拿当前行，再取dataset.rowId - 校验状态存在对象里：
const rowStatus = { '0': { email: true, password: false } }，不能共用一个布尔变量
最容易被忽略的是：表格中 oninput 处理函数里直接写 document.getElementById('email')——永远只操作第一行，后面新增的全失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
