HTML5 email输入框验证失效：max@i9被判定合法的原因及修复方案

异常原因 #

HTML原生<input type="email">的内置验证规则遵循RFC 5322邮件格式标准，该标准允许邮箱域名部分为无顶级域的短域名（这类邮箱通常用于内部本地网络场景，比如企业内网邮箱），因此max@i9符合原生验证的判定规则，不会被拦截。你提到的max@.de被拦截是因为域名开头直接跟顶级域符号.，不符合RFC的基础格式要求。

修复方案 #

1. 前端增加自定义正则校验 #

给email输入框添加pattern属性，自定义正则规则要求域名必须包含.且顶级域长度不低于2位，同时搭配title属性给用户明确的格式提示，修改后的代码如下：

<form>
  <input 
    type="email" 
    placeholder="E-Mail" 
    required
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
    title="请输入合法的邮箱地址，例如xxx@xxx.xx"
  >
  <input type="submit" value="Send" />
</form>

注：该正则为通用场景的简化规则，可根据自身业务需求调整匹配规则

2. 后端增加二次校验 #

前端验证只能拦截普通用户的错误输入，无法防范恶意绕过提交，因此后端必须补充邮箱校验逻辑，可选校验维度包括：

• 格式合规性二次校验
• 邮箱域名的MX记录查询，确认该域名支持接收邮件
• 可选发送验证邮件给用户，点击链接后才完成邮箱有效性确认

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