invalid事件需直接绑定到表单元素而非form，仅在校验失败时触发（如提交或checkvalidity调用），不冒泡且不阻止提交，配合preventdefault可禁用默认提示并结合validity属性精准判断错误类型。
在 H5 表单中，invalid 事件是原生支持的、专门用于捕获表单控件校验失败的瞬间（即浏览器内置校验未通过时触发），但它**不冒泡**，且**不会阻止表单提交**——它只是通知你“这里校验失败了”。要可靠监听它，关键在于正确绑定、理解触发时机，并配合 preventDefault() 做自定义反馈。
✅ 必须直接绑定到具体表单元素上
invalid 事件不会冒泡到 form 元素，也不能靠委托监听。必须对每个需要校验反馈的 <input>、<select></select>、<textarea></textarea> 单独添加监听器：
- 错误写法：
form.addEventListener('invalid', ...)—— 不会触发 - 正确写法：
input.addEventListener('invalid', e => { ... })
✅ 触发时机：仅在浏览器尝试校验且失败时（非实时）
该事件不是在用户输入过程中实时触发，而是在以下任一时刻发生校验失败时触发：
- 用户点击提交按钮（
submit）后，浏览器自动校验该字段 - 脚本中主动调用
element.checkValidity()或form.reportValidity() - 用户离开焦点（
blur）时，部分浏览器（如 Chrome）在某些属性下也会触发（但不可依赖）
⚠️ 它不会在 input 或 keydown 时触发，所以不能替代实时验证逻辑。
✅ 捕获并阻止默认提示（可选）
浏览器默认会在 invalid 时弹出气泡提示（如 “请填写此字段”）。若想用自定义 UI 替代，可在事件处理器中调用 e.preventDefault()：
emailInput.addEventListener('invalid', function(e) {
e.preventDefault(); // 阻止原生提示
showCustomError(emailInput, '邮箱格式不正确');
});
注意：调用 preventDefault() 后，setCustomValidity('') 不会自动清除错误状态，需手动重置。
✅ 结合 validity API 做精准判断
事件对象本身不带错误类型信息，需通过元素的 validity 属性进一步判断原因：
input.addEventListener('invalid', function(e) {
const validity = e.target.validity;
if (validity.valueMissing) {
console.log('必填项为空');
} else if (validity.typeMismatch) {
console.log('类型不匹配（如邮箱格式错）');
} else if (validity.patternMismatch) {
console.log('正则校验失败');
}
});
常用 validity 属性：valueMissing、typeMismatch、patternMismatch、tooShort、rangeOverflow 等。
不复杂但容易忽略：绑定位置、触发时机、preventDefault 的配合，这三点理清，invalid 就能稳稳帮你捕获校验失败瞬间。
