本文详解如何在 HTML 的 pattern 属性中正确编写正则表达式，使邮箱验证既兼容标准格式（如 example.com），又支持含点号（.）或连字符（-）的合法域名（如 my-site.com 或 sub.domain.com），避免因正则限制过严导致用户输入失败。
本文详解如何在 html `` 的 `pattern` 属性中正确编写正则表达式，使邮箱验证既兼容标准格式（如 `example.com`），又支持含点号（`.`）或连字符（`-`）的合法域名（如 `my-site.com` 或 `sub.domain.com`），避免因正则限制过严导致用户输入失败。
在 HTML 表单中使用原生 pattern 属性进行前端邮箱校验时，需注意：HTML 的 pattern 属性要求正则匹配整个输入值（隐式添加 ^ 和 $），且必须严格符合域名规范。原始代码中的正则：
pattern="[a-zA-Z0-9\.]+@[a-zA-Z0-9\.]+\.[a-z]+"
存在两个关键问题：
- [\.] 在字符类中仅表示字面量点号，但将 . 和字母数字混在同一组（如 [a-zA-Z0-9\.]+）会导致匹配 user@domain..com 或 user@.domain.com 等非法结构；
- 未支持域名中常见的连字符（-），例如 my-company.org 或 sub.example.co.uk 中的 -。
✅ 正确方案是分段建模域名结构：
其中
推荐使用的优化正则表达式为：
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9.-]*[a-zA-Z0-9]\.[a-z]{2,}"
但若仅需支持单层级子域 + 连字符/点号二选一（如 site.com、my-site.com、my.site.com，但不支持 a-b.c-d.org），更简洁安全的写法是：
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9]+[.\-][a-zA-Z0-9]+\.[a-z]{2,}"
⚠️ 注意事项：
- [.\-] 中的 - 必须放在字符类末尾（或开头），否则会被解析为范围符（如 [a-z-] 合法，[-a-z] 也合法，但 [a-z-] 更清晰）；
- 使用 [a-zA-Z0-9]+[.\-][a-zA-Z0-9]+ 确保连字符或点号严格位于两个非空字母数字段之间，杜绝 @-example.com 或 @example-.com；
- 顶级域名（TLD）建议用 [a-z]{2,}（至少 2 位小写字母），比 \.[a-z]+ 更严谨（排除 .x 这类无效 TLD）；
- 实际生产环境切勿仅依赖前端校验——pattern 仅提升用户体验，后端必须用 RFC 5322 兼容库（如 Python 的 email-validator 或 JS 的 validator.js）二次验证。
最终修复后的 HTML 片段示例：
<div class="srf-field_wrapper">
<label for="emailAddress">E-mail*</label>
<input id="emailAddress" name="emailAddress" required type="email" placeholder="Ex: <a class=" __cf_email__ data-cfemail="6f020001410e0b1d0a1c1c0a2f0a020e060341091d" href="/cdn-cgi/l/email-protection">[email protected]"
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9]+[.\-][a-zA-Z0-9]+\.[a-z]{2,}"
oninvalid="setCustomValidity('Veuillez remplir ce champ obligatoire')"
oninput="setCustomValidity('')"
>
</div>
? 小技巧：将 type="text" 改为 type="email" 可启用浏览器内置邮箱格式提示（如 iOS 键盘显示 @ 符号），与 pattern 协同增强可用性。正则设计核心原则是——明确边界、禁止空段、尊重 DNS 域名规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
