blur不是校验主入口，应以input+防抖为主、blur仅兜底；原生验证属性更稳，异步校验需blur/change触发并用setcustomvalidity反馈。
blur 是监听表单元素失去焦点的正确事件，但直接绑定校验逻辑常导致失效、闪烁或移动端漏触发——关键不是“怎么绑”，而是“什么时候该用它”。
blur 事件本身不能被阻止，校验逻辑别放错位置
调用 event.preventDefault() 在 blur 回调里完全无效，浏览器强制失焦是不可逆行为。常见错误是试图在 blur 里立刻 input.focus() 来“拦住用户”，结果：视觉闪烁、辅助技术焦点流中断、异步聚焦被后续点击覆盖。
- 真正需要“防失焦”的场景（比如必填未填就切走），应提前控制：用
focusout+document.activeElement判断是否真离开了当前区域，再决定是否弹窗提示或滚动定位 - 表单提交或重置后失焦是规范行为，
form.submit()或form.reset()后焦点自动清空，此时需手动input.focus()，且推荐加setTimeout(() => input.focus(), 0)确保 DOM 更新完成 - 动态插入的
input（如模态框）别依赖autofocus，改用框架钩子（如 React 的useEffect或 Bootstrap 的shown.bs.modal）确保挂载后再聚焦
移动端软键盘收起 ≠ blur，别让它当校验入口
iOS Safari 和部分安卓 WebView 对软键盘收起是否触发 blur 没有统一策略，大量机型根本不触发。误把 blur 当作“输入结束信号”，会导致校验卡住、提示不出现。
- 关键校验逻辑（如密码确认、邮箱格式）不要只靠
blur，必须叠加input事件 + 防抖（如setTimeout延迟 300ms） - 若必须响应“输入完成”，可用
focusout（冒泡版blur）配合判断：if (document.activeElement !== input)才执行校验 - 对纯移动端表单，建议默认启用
input实时校验，blur仅作兜底补全（比如补全提示文案、清除临时状态）
原生属性比手写 blur 校验更稳、更轻、更无障碍
现代浏览器已支持完整的声明式验证，required、type="email"、pattern、minlength 等属性能覆盖 80% 场景，且自带错误气泡、键盘适配和读屏支持。
- 原生校验失败时，
input.checkValidity()返回false，input.validationMessage可取到默认提示文本 - 自定义提示可用
input.setCustomValidity("用户名已存在")，清空则传空字符串 - 提交时统一校验：
form.reportValidity()会触发表单内所有字段的原生校验并高亮首个错误项，无需遍历input手动调用 - 注意：原生校验不拦截异步逻辑（如用户名查重），这类仍需
blur或change触发 fetch，但错误反馈建议用setCustomValidity而非 DOM 操作
真正难的不是写校验函数，而是判断哪个时机该用哪个 API：用户手指刚抬起来，软键盘还没收，blur 还没来，input 已经发了三次请求——这时候你得知道，该停掉前两个，只留最后一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
