HTML5邮箱正则验证需求：仅支持单域名，拒绝多域名与连续点

这里有两个核心需求需要解决：禁止邮箱用户名部分出现连续点，以及限制域名只能是单级（即主域名.顶级域名的格式，不允许主域名.子域名.顶级域名这类多级域名）。

修改后的HTML代码如下：

<input type="email" id="email" name="email" 
       pattern="^[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]+)*@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$" 
       value="{{ $user->email or null}}" 
       autofocus 
       required 
       title="请输入格式正确的邮箱，例如 matthew.john@mail-domain.co">

正则规则详解 #

我们拆解一下修改后的正则各部分的作用：

1. 用户名匹配部分：^[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]+)* #

• ^：匹配字符串的开始，确保用户名从有效字符开头
• [a-zA-Z0-9-_]+：匹配至少一个字母、数字、下划线或连字符，避免用户名以点开头
• (?:\.[a-zA-Z0-9-_]+)*：允许在有效字符组之间添加单个点（\.），后面必须跟至少一个有效字符；*表示这个结构可以重复0次或多次，这样既支持带点的用户名（比如matthew.john），又禁止连续点（因为每次点后面都必须跟有效字符，无法出现..）

2. 域名匹配部分：@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$ #

• @：匹配邮箱的@分隔符
• [a-zA-Z0-9-]+：匹配主域名部分，只允许字母、数字和连字符，禁止主域名里出现点，确保只能是单级主域名（比如mail-domain，不能是mail-domain.co）
• \.[a-zA-Z]{2,}：匹配顶级域名，必须以点开头，后面跟至少2个字母（比如co、com、org）
• $：匹配字符串的结束，确保域名后面没有多余的字符

验证效果测试 #

• ✅ 允许的合法邮箱：

  • matthew.john@mail-domain.co
  • mathieu_mourareau@berger-levrault.com
  • user123@test.org

• ❌ 被拒绝的非法邮箱：

  • mathieu..mourareau@berger-levrault.com（连续双点）
  • matthew.john@mail-domain.co.uk（多级域名）
  • .user@test.com（用户名以点开头）
  • user.@test.com（用户名以点结尾）

内容的提问来源于stack exchange，提问作者Mathieu Mourareau