blur事件适合做输入框离焦时的阶段性格式校验，需监听失焦、取值、正则校验并及时反馈，避免自动修正和重复绑定，可结合data属性提升可维护性。

在 blur 事件中做输入框离焦时的实时格式校验，核心是：监听失去焦点、获取当前值、按规则校验、及时反馈（样式/提示），且避免干扰用户正常输入流程。

blur 事件适合做“阶段性校验”，不是实时校验

blur 发生在用户离开输入框（点击别处、Tab 切换、回车等）时，适合做一次性的格式确认，比如手机号是否11位、邮箱是否有@、日期是否符合 YYYY-MM-DD 格式。它不适用于边输边验（那是 input 或 keyup 的事），但能避免用户填完就提交却不知格式错的尴尬。

基础实现：绑定 blur + 正则 + 反馈控制

以邮箱校验为例：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

• 用 addEventListener('blur', handler) 绑定事件（推荐，比 onblur 属性更灵活）
• 在 handler 中取 input.value.trim()，避免空格干扰
• 用正则 /^[^\s@]+@[^\s@]+\.[^\s@]+$/ 判断基本邮箱结构（生产环境建议用更严谨方案或后端兜底）
• 校验失败时，给 input 添加 class="error" 并显示提示文案（如用 adjacent sibling .error-tip）
• 校验通过则移除 error 类、隐藏提示，或添加 success 状态

注意几个易错细节

• 不要在 blur 中自动修正值（如删掉非法字符），这会打断用户操作，尤其当用户只是临时切走又切回时
• 避免重复绑定：如果动态创建表单，每次都要检查是否已绑，或用事件委托（对 form 元素监听 focusout 事件更稳妥）
• 兼容性考虑：blur 在所有现代浏览器都支持；若需兼容老 IE，可用 focusout（冒泡版 blur）
• 与 submit 联动：在表单 submit 时，应再次触发所有必填项的 blur 校验（或统一 validate() 函数），防止用户跳过 blur 直接点提交

进阶建议：结合 dataset 和自定义属性提升可维护性

给 input 加 data-validate="email" 或 data-pattern="^1[3-9]\d{9}$"，在 blur 处理器里统一读取并分发校验逻辑，这样新增字段不用改 JS，只改 HTML 即可扩展规则。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南