可通过HTML5 pattern属性、JavaScript正则、双重验证或email类型配合reportValidity()四种方式实现邮箱格式校验：pattern提供原生快速反馈，JS增强灵活性与交互控制，双重验证兼顾健壮性，reportValidity()支持非提交场景主动触发。
如果您在网页表单中需要确保用户输入的邮箱地址格式正确，则可以通过 HTML5 的 pattern 属性或 JavaScript 正则表达式进行客户端验证。以下是几种可直接实施的验证方法：
一、使用 HTML5 pattern 属性验证邮箱
HTML5 原生支持通过 pattern 属性对 或 ail"> 元素施加正则约束，浏览器会在提交前自动校验输入是否匹配指定模式，并触发默认提示。
1、在 input 标签中添加 type="email" 并设置 pattern 属性，例如：。
2、确保同时添加 required 属性，防止空值绕过 pattern 校验。
立即学习“前端免费学习笔记（深入）”；
3、可选：添加 title 属性提供自定义提示文本，如 title="请输入有效的邮箱地址"，部分浏览器会在验证失败时显示该提示。
二、使用 JavaScript 正则表达式验证邮箱（onblur 或 onsubmit）
JavaScript 验证具备更高灵活性和可控性，可在用户失焦或表单提交时执行校验逻辑，并自定义错误反馈方式，避免依赖浏览器默认行为。
1、获取输入框 DOM 元素，例如：const emailInput = document.getElementById("email");。
2、定义邮箱正则表达式：const emailRegex = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i;。
3、绑定事件监听器，如 emailInput.addEventListener("blur", function() { if (!emailRegex.test(this.value)) { /* 显示错误样式或提示 */ } });。
三、结合 HTML5 和 JS 实现双重验证
仅靠 HTML5 pattern 无法覆盖所有语义合法性场景（如邮箱域名是否存在），而纯 JS 可补充增强。双重验证可提升健壮性，既利用原生校验快速反馈，又通过脚本控制更精细的交互逻辑。
1、保留 type="email" 和 pattern 属性以启用基础原生校验。
2、在表单 submit 事件中调用 JS 函数，再次执行相同正则校验：if (!emailRegex.test(emailInput.value)) { event.preventDefault(); }。
3、为输入框动态添加或移除 CSS 类（如 is-invalid）以可视化校验状态。
四、使用内置 email 类型配合 reportValidity() 主动触发校验
HTML5 的 具备内置邮箱格式识别能力，无需手动写 pattern；调用 reportValidity() 方法可主动触发浏览器原生验证提示，适用于按钮点击等非提交场景。
1、将输入框设为 ，不依赖 pattern 亦可生效。
2、绑定按钮点击事件：document.getElementById("checkBtn").addEventListener("click", () => { emailInput.reportValidity(); });。
3、reportValidity() 返回布尔值，true 表示通过校验，false 表示未通过并显示浏览器默认气泡提示。
