本文详解如何在 HTML input 的 pattern 属性中正确编写正则表达式，使邮箱验证同时兼容形如 user@example.com 和 user@sub-domain.com 的合法域名（允许域名部分含一个点号 或 一个连字符），避免误拒有效邮箱。
本文详解如何在 html `input` 的 `pattern` 属性中正确编写正则表达式，使邮箱验证同时兼容形如 `user@example.com` 和 `user@sub-domain.com` 的合法域名（允许域名部分含一个点号 **或** 一个连字符），避免误拒有效邮箱。
在 HTML 表单中，仅依赖 type="email" 无法满足自定义域名格式校验需求（例如需支持 sub-domain.com 这类含连字符的二级域名）。此时必须使用 pattern 属性配合正则表达式实现精确控制。
你原始的正则为：
pattern="[a-zA-Z0-9\.]+@[a-zA-Z0-9\.]+\.[a-z]+"
该表达式在域名部分（@ 后、首个 . 前）仅允许字母、数字和点号，且未区分「子域名分隔符」与「域名主体内连字符」，导致 sub-domain.com 被拒绝。
✅ 正确思路是：将域名部分拆分为「主域前缀」+「可选分隔符（点或连字符）」+「主域后缀」，再接顶级域。推荐使用以下增强型正则：
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9]+[\.-]?[a-zA-Z0-9]+\.[a-z]{2,}"
关键改进说明：
- [\.-]?：匹配 0 或 1 个 字符，且该字符只能是 . 或 -（注意：- 放在字符组末尾可避免被解析为范围符）；
- [a-zA-Z0-9]+ 出现两次，分别代表分隔符前后的域名片段（如 sub 和 domain），确保连字符/点号不位于开头或结尾，符合 DNS 域名规范；
- 邮箱本地部分（@ 前）已扩展为 [a-zA-Z0-9._%+-]+，兼容常见特殊字符（. _ % + -），更贴近 RFC 5322；
- 顶级域改用 [a-z]{2,}，支持 .org .io .dev 等多字符 TLD，避免硬编码单字母限制。
⚠️ 注意事项：
- HTML pattern 属性自动锚定全字符串（隐含 ^...$），无需手动添加；
- 此正则仍为前端轻量校验，不可替代后端验证——真实场景中需服务端用更健壮的库（如 validator.js 或原生 filter_var($email, FILTER_VALIDATE_EMAIL)）二次校验；
- 若需支持国际化域名（IDN，如含中文字符），前端需先 Punycode 编码，建议交由后端处理。
最终整合示例（含语义化提示与无障碍优化）：
<div class="srf-field_wrapper">
<label for="emailAddress">E-mail *</label>
<input id="emailAddress" name="emailAddress" type="text" required placeholder="Ex: user@sub-domain.com" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9]+[\.-]?[a-zA-Z0-9]+\.[a-z]{2,}" title="请输入有效的邮箱地址，域名中可包含一个点号或连字符（如 example.com 或 sub-domain.com）" oninvalid="this.setCustomValidity('请输入有效的邮箱地址')" oninput="this.setCustomValidity('')">
</div>
通过此方案，既保持 HTML 原生表单验证的简洁性，又精准覆盖含连字符域名的合法场景，兼顾兼容性与用户体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
