type="email" 已满足基本校验，仅在需支持连字符子域或多段顶级域时才需 pattern 正则；pattern 写法需注意转义、字符类及锚点问题，且必须搭配 title 属性；后端验证不可省略。
直接用 input type="email" 就够了，不需要额外写正则——除非你明确需要支持 sub-domain.com 这类含连字符的二级域名，或想覆盖 user.name@domain.co.uk 这种多段顶级域。
为什么 type="email" 有时会报错“请填写有效的电子邮件地址”
浏览器只检查最基础结构：必须有 @，且 @ 前后都得有非空字符（比如 a@b 会通过），但不验证域名是否存在、也不要求必须带 .com。常见误判场景：
-
test@example被拒——缺顶级域（.com、.org等），浏览器认为格式不完整 -
user@sub-domain.com在部分旧版 Safari 或 Android WebView 中被拒——因内置校验器对连字符位置过于严格 -
admin@mail.example.co.uk被拒——多段 TLD（.co.uk）未被所有浏览器识别为合法
pattern 属性加正则时最容易踩的坑
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]
推荐的 pattern 写法与适用场景
以下正则已实测兼容 Chrome、Firefox、Safari（macOS/iOS）、Edge 最新版：
立即学习“前端免费学习笔记（深入）”；
- 通用宽松型（推荐大多数业务）：
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 应配合使用，而非二选一。
