失去焦点时触发校验的正确事件是blur，它稳定、兼容性好且语义准确；应配合setcustomvalidity()实现原生校验提示，并在每次校验中显式重置错误状态，提交前推荐统一用submit事件校验以避免遗漏。
input 失去焦点时触发校验的正确事件是 blur
不是 change，也不是 focusout（虽然它也能用，但兼容性和语义不如 blur）。blur 是原生表单控件失去焦点时最稳定、最广泛支持的事件，且只在用户主动移开焦点时触发一次，不会因内部 DOM 变化误发。
常见错误是监听 change——它只在值真正改变后失焦才触发，如果用户没改内容就点别处，校验就漏了；还有人用 focusout，但它会冒泡，可能被父容器拦截或重复触发。
- 校验逻辑应放在
addEventListener('blur', handler)中 - 推荐对每个
<input>单独绑定，避免用事件委托（因为需要读取当前元素的value、dataset等） - 若需支持回车提交同时触发校验，额外监听
keydown并判断Enter键
用 setCustomValidity() 实现原生校验提示
不用自己弹 alert 或插 DOM，浏览器原生校验 API 就能联动 :valid/:invalid 伪类和提交阻断。关键在于：必须调用 setCustomValidity()，且空字符串表示“通过”，非空字符串才是错误信息。
容易踩的坑是忘记重置：校验失败设了提示后，用户再输入正确内容，却没清空错误状态，导致一直报错。必须在每次校验逻辑里显式调用 setCustomValidity('') 表示默认状态。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
input.setCustomValidity('')→ 清除错误，允许提交 -
input.setCustomValidity('邮箱格式不正确')→ 触发红色边框 + 原生 tooltip - 配合
reportValidity()可手动触发显示（比如提交前全量校验） - 注意：
required、type="email"等原生属性仍有效，setCustomValidity是叠加补充
防抖校验不是必须的，但避免高频触发要小心
blur 本身是离散事件，用户点一下才触发一次，所以一般不需要防抖。强行加 setTimeout 反而可能导致校验延迟、交互卡顿，甚至因异步导致 this 指向丢失。
唯一需要延迟的场景是：校验逻辑含网络请求（如用户名是否已存在），这时要用 fetch + loading 状态控制 UI，而不是防抖。
- 纯前端校验（长度、正则、必填）直接同步执行即可
- 若用了防抖，必须确保
blur后的延时回调里还能访问到原始input元素（建议闭包捕获或用箭头函数） - 禁用“校验中”的输入框提交按钮，防止用户重复点击
兼容性与移动端注意事项
所有现代浏览器（Chrome/Firefox/Safari/Edge）都支持 blur 和 setCustomValidity，包括 iOS Safari 12.2+。但有两点实际问题：
- Android 微信内置浏览器（X5 内核）对
setCustomValidity的 tooltip 支持不稳定，建议 fallback 到自定义data-error属性 + CSS 提示 - 移动端软键盘收起不一定触发
blur（尤其在<textarea></textarea>中），可监听focusout作为补充，但需用event.relatedTarget过滤掉键盘收起产生的假失焦 -
inputmode和autocomplete属性会影响键盘类型和自动填充，间接影响用户输入路径，校验时机也要覆盖这些路径
真实项目里，最常被忽略的是「用户用鼠标点提交按钮，但输入框还没 blur」——这时表单提交会绕过 blur 校验。解决方案只有两个：要么给提交按钮也绑 click 前手动触发所有 input 的 blur，要么放弃 blur 依赖，改用 submit 事件统一校验。后者更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
