HTML5表单校验需融合实时（input）与焦点离开（blur）策略：前者用于轻量初筛并清空错误，后者执行终审；原生属性仅提交时生效，须配合JS实现友好提示；移动端需多事件协同并兼顾无障碍。
HTML5 表单的实时校验和离开焦点校验不是互斥方案，而是互补策略：前者关注输入过程中的轻量反馈，后者聚焦字段完成后的格式确认。关键在于区分场景、控制触发时机、避免干扰用户操作。
实时校验（input 事件）——适合长度、结构初筛
监听 input 事件，在每次键入、删除、粘贴后立即响应，但不用于复杂正则或远程校验，防止卡顿或误判（如中文输入法未上屏时）。
- 验证密码长度：用
minlength="8"+input事件动态显示强度提示，不报错 - 检查邮箱前半段是否含 @：简单字符串判断，快速反馈“格式可能不完整”
- 清空自定义错误：
input中调用setCustomValidity('')，避免残留提示
离开焦点校验（blur 事件）——适合最终格式与业务规则确认
blur 是字段“完成填写”的信号，适合执行较重逻辑，比如邮箱全格式匹配、手机号号段校验、下拉列表强制选择等。但需注意移动端软键盘收起不一定触发 blur，建议配合 change 或防抖处理。
- 邮箱用
type="email"+pattern，在blur时调用reportValidity()触发浏览器原生提示 - 对接过滤下拉列表时，
blur中加setTimeout(() => {...}, 0)确保点击列表项后 value 已更新，再判断是否为有效选项 - 对非必填但有格式要求的字段（如邮编），仅在用户确实输入了内容时才校验，避免空值误报
原生属性与 JS 的分工要明确
HTML5 的 required、pattern、type 不会自动在 input 时生效，只在 submit 或手动调用 checkValidity() 时触发。所以不能依赖它们实现“实时”效果。
- 把
required当作底线约束，提交时兜底；把input+setCustomValidity做前端友好提示 -
pattern必须配title才有错误文案，否则validationMessage可能为空 - 禁用浏览器默认校验气泡（如
novalidate）后，仍可调用checkValidity()获取状态，用于自定义样式或日志
移动端与无障碍的适配要点
blur 在 iOS Safari 或屏幕阅读器中可能延迟或跳过，不能作为唯一校验入口。
- 对关键字段，同时监听
input（轻量）、blur（主校验）、change（iOS 补漏） - 用
aria-invalid和aria-describedby关联错误信息，确保读屏器可识别 - 避免在
input中频繁弹出提示框或滚动页面，改用内联文字+颜色变化更稳妥
