应使用type="email"配合pattern、required和title实现双重校验：保留原生语义与键盘支持，用严格正则加固格式，title触发提示，js仅补trim和即时验证。
直接用 type="email" 只能做最基础的格式检查（比如必须含 @、前后不能全空），它不拦 user@m.c 或 test@.com 这类明显非法域名。要真正加固，得靠 pattern 属性叠加一层更严格的正则，浏览器会在提交时自动触发双重校验。
关键写法：type + pattern + title + required 缺一不可
只加 pattern 不够，必须和原生类型协同使用：
-
保留
type="email"：维持移动端邮箱键盘、无障碍支持、基础语义识别 -
加上
required：确保非空，否则pattern在空值时不会触发 -
pattern写严格正则：推荐这个兼顾可读与实用性版本：pattern="[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?@[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.[a-zA-Z]{2,63}" -
title必须写：Chrome/Safari 等只在有title时才显示自定义提示文字，内容建议明确，例如：title="请输入标准邮箱，如 name@domain.com"
避开常见坑：iOS Safari 和粘贴异常
iOS Safari 会忽略 pattern 校验，所以不能只依赖它；用户粘贴时还可能带零宽空格（U+200B）或首尾空格，导致原生校验通过但实际无效。补救很简单：
- 提交前手动
trim()：emailInput.value = emailInput.value.trim(); - 主动调用校验并报错：
if (!emailInput.checkValidity()) { emailInput.reportValidity(); } - 监听
oninput而非仅onblur，避免粘贴后直接点提交跳过反馈
为什么不用 JS 正则替代原生？
纯 JS 校验虽灵活，但会丢失三样东西：
– 浏览器原生错误气泡（键盘操作、读屏软件都认得）
– 移动端智能键盘（@ 和 . 键优先显示）
– 表单级统一状态管理（form.checkValidity() 一键判断）
所以最佳路径是：原生打底 + pattern 加固 + 轻量 JS 补漏，不重写，不绕开。
