type="email"仅做基础语法校验，无法验证长度、域名有效性或国际化邮箱；需配合required、js实时校验及后端多重验证。
邮箱输入框怎么用 type="email" 做基础校验
浏览器原生的 type="email" 能拦住明显错误，比如 @ 缺失、连续两个 @、没有域名部分。但它不校验长度、不检查域名是否存在、也不拒绝像 a@b.c 这种语法合法但极可能无效的地址。
实际用法就是：
<input type="email" name="email" required>加上
required 属性后，空提交会触发浏览器提示；用户聚焦后离开时，格式不对也会高亮报错（样式可自定义 :invalid）。
- 别依赖它防恶意输入——它纯前端，绕过极其容易
-
pattern属性不能和type="email"混用，否则浏览器会忽略pattern - 某些老版本 Safari 对
type="email"的正则支持松散，test@test也能通过
用 pattern 写更严的正则但要小心兼容性
如果想限制必须含 .com 或禁止短域名，可以用 pattern，例如：
<input type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="请输入有效邮箱">注意这里必须用 type="text"，否则 pattern 失效。
但正则越长越容易出问题：
- 手机键盘可能不弹出 @ 符号——Android 多数键盘识别
type="email"自动加 @，但识别不了pattern -
[a-z]{2,}会拒绝.io、.ai等新顶级域，也拦不住中文域名（需 Punycode 转换） - IE 完全不支持
pattern，得靠 JS 回退
JavaScript 实时校验该监听哪个事件
别只用 onblur，用户可能没离开就提交。推荐组合监听：input（打字就验）、change（粘贴后触发）、submit（最终兜底）。
简单校验函数示例：
function isValidEmail(str) {<br> const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;<br> return re.test(str);<br>}这个比浏览器默认的略严格（排除开头/结尾空格），但依然不验证 MX 记录或 SMTP 连通性。
- 别在
input里直接弹alert，干扰输入节奏；用旁边小图标或文字提示更友好 - 用户粘贴带换行符的邮箱（如从 Excel 复制）会导致
isValidEmail返回 false，记得先.trim() - 正则里用
^和$包裹，否则"abc@def@g.com"中间一段也能匹配成功
后端必须重验，且不能只信前端正则
所有前端校验都只是体验优化，攻击者删掉 HTML 或发 curl 请求就能绕过。后端收到 email 字段后，至少做三件事：
- 用服务端语言内置的邮箱解析库（如 Python 的
email-validator、Node.js 的validator.js）跑一遍 - 检查长度：总长 ≤ 254 字符（RFC 5321），本地部分 ≤ 64 字符
- 对关键操作（如注册、密码重置）必须发验证邮件，且链接带一次性 token，过期时间 ≤ 24 小时
最容易被忽略的是国际化邮箱（含中文、日文字符）——它们需要转成 ASCII 格式（Punycode）再验证，直接用普通正则会漏判或误判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
