HTML5邮箱验证如何禁止无后缀格式（如aaa@aaa）的邮箱？

嘿，我懂你要的效果——默认的HTML5 type="email" 验证确实有点宽松，会放过像 aaa@aaa 这种不符合真实邮箱规则的输入，因为它只校验了@符号的存在，没强制域名部分必须包含点号。咱们可以通过给输入框添加pattern属性，配合自定义正则来补上这个验证逻辑。

修改后的表单代码 #

<form>
  <h2>Email Validation</h2>
  <input 
    type="email" 
    value="" 
    placeholder="name@email.com" 
    required
    pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
    title="请输入有效的邮箱地址，例如：name@email.com"
  />
  <input type="submit" value="Submit" />
</form>

关键说明 #

• pattern属性的正则作用：
  • ^[a-zA-Z0-9._%+-]+：匹配邮箱的用户名部分，支持字母、数字和邮箱里常见的特殊字符（比如.、_、+等）
  • @：强制要求必须包含@分隔符
  • [a-zA-Z0-9.-]+：匹配域名的前缀部分（比如gmail、my-domain）
  • \.[a-zA-Z]{2,}：核心限制——强制域名必须包含至少一个点号，且点号后面跟着至少2个字母的后缀（比如.com、.co.in）
• title属性：当用户输入不符合规则时，浏览器会弹出这个提示文本，帮用户明确正确的格式要求

这样修改后，像aaa@aaa这类域名部分没有点号的输入就会触发HTML5的验证错误，只有符合xxx@xxx.xx或多级域名（比如xxx@xxx.co.in）的邮箱才能通过验证。

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