HTML表单控件email邮箱输入与格式验证教程-html教程-PHP中文网

type="email" 已满足基本校验，仅在需支持连字符子域或多段顶级域时才需 pattern 正则；pattern 写法需注意转义、字符类及锚点问题，且必须搭配 title 属性；后端验证不可省略。

html表单控件email邮箱输入与格式验证教程

直接用 input type="email" 就够了，不需要额外写正则——除非你明确需要支持 sub-domain.com 这类含连字符的二级域名，或想覆盖 user.name@domain.co.uk 这种多段顶级域。

浏览器只检查最基础结构：必须有 @，且 @ 前后都得有非空字符（比如 a@b 会通过），但不验证域名是否存在、也不要求必须带 .com。常见误判场景：

HTML 的 pattern 是字符串值，不是 JS 正则字面量，所以写法和 JS 不同。常见错误：

[a-z.-]+ 报错 Invalid character in character class——因为 - 在方括号中间会被当范围符，应写成 [a-z.-] 或更安全的 [a-z.\-]
漏掉 \. 中的反斜杠，写成 [a-z]+.[a-z]{2,}——点号没转义，会匹配任意字符
用 ^ 和 $ 锚定——其实没必要，pattern 默认全匹配，加了反而可能因引号解析出问题
大小写混用却没加 i 标志——HTML pattern 不支持标志位，只能靠字符类写全 [a-zA-Z]

以下正则已实测兼容 Chrome、Firefox、Safari（macOS/iOS）、Edge 最新版：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

通用宽松型（推荐大多数业务）：pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" 支持 user_name@sub-domain.co.uk，但不强制要求 sub-domain 中必须含连字符
显式允许单个连字符在子域名中：pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9]+[-.]?[a-zA-Z0-9]+\.[a-zA-Z]{2,}" 确保 sub-domain.com 通过，同时拒绝 -sub.com 或 sub-.com
仅用于防呆，不追求 RFC 合规：pattern=".+@.+\..+" 简单粗暴，避免用户输错成 name@domain 或 @domain.com

务必搭配 title 属性，否则错误提示是模糊的“请与所要求的格式匹配”：

<input type="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" title="请输入有效的邮箱地址，例如 user@example.com">

type="email" 和 pattern 都运行在用户设备上，可被禁用、绕过或伪造。真实系统中必须：

服务端用语言原生函数校验，如 PHP 的 filter_var($email, FILTER_VALIDATE_EMAIL)，Node.js 的 validator.isEmail()
若需确认邮箱真实存在，得发验证邮件；格式正确 ≠ 邮箱可用
国际化域名（如含中文的 张三@例子.中国）需先转 Punycode，前端不做处理，交由后端统一解码

最易被忽略的一点：移动端软键盘行为依赖 type="email"，但如果你加了 pattern 却没设 type="email"，键盘不会自动切到邮箱布局——type 和 pattern 应配合使用，而非二选一。