HTML email类型input的pattern属性正则验证异常问题

问题根源 #

当input的type="email"时，浏览器会先执行内置的邮箱格式验证，这套规则允许类似user@localhost这种不带点的域名格式（符合RFC标准中对本地域名的定义）。你的自定义pattern是在浏览器内置验证通过之后才会生效，所以即使正则要求域名部分必须有点，也无法拦截浏览器已经放行的无点域名格式。

另外，部分浏览器对type="email"的pattern有特殊处理逻辑：它会自动将正则应用于邮箱的本地部分和域名部分，而非整个邮箱字符串，这也会导致正则无法按预期匹配完整格式。

解决方案 #

方案1：改用type="text"替代type="email" #

如果需要完全用自定义正则控制验证逻辑，将input的type改为text，跳过浏览器内置邮箱验证，完全遵循自定义pattern规则：

<form>
  <input type="text" placeholder="enter your email" pattern="[A-Za-z0-9._+\-\']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$" required>
  <button>submit</button>
</form>

方案2：保留type="email"并增强正则 #

如果想要保留type="email"的特性（比如移动端弹出邮箱键盘），可以修改正则，明确限制域名部分必须包含点，同时用title属性提示用户正确格式：

<form>
  <input type="email" placeholder="enter your email" pattern="[A-Za-z0-9._+\-\']+@([A-Za-z0-9.\-]+\.)+[A-Za-z]{2,}$" required title="请输入格式正确的邮箱，例如xxx@xxx.com">
  <button>submit</button>
</form>

这里将域名部分的正则从[A-Za-z0-9.\-]+\.[A-Za-z]{2,}调整为([A-Za-z0-9.\-]+\.)+[A-Za-z]{2,}，确保域名至少包含一个点和后续的顶级域名，title属性会在验证失败时给用户明确提示。

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