HTML原生type="email"能直接用但仅做基础格式检查，不验证邮箱真实性；需配合required属性，移动端键盘体验好是其唯一强优势；必须后端二次校验，前端正则推荐简洁实用型，提交前用submit事件拦截并setCustomValidity提示。
HTML原生type="email"能直接用吗
能，但只做基础格式检查，不验证邮箱是否真实存在。浏览器会拦截明显错误的输入（比如没有@符号、@后面没点），但像 user@domain（缺顶级域名）或 user@@domain.com 这类边界情况，部分旧版Chrome或Safari可能放行。
实际项目中别只靠它——它不阻止提交，只是触发input事件时提示，且样式和提示文案不可控。
- 必须配合
required属性才生效，否则空值也能通过 - 移动端软键盘会自动弹出@和.符号，体验好，这是唯一强优势
- 若后端没做二次校验，用户填
test@test也能发请求过去
用JavaScript正则校验邮箱要注意什么
别抄网上那些“史上最全邮箱正则”，RFC 5322标准正则长达上千字符，根本没法维护。业务场景里99%只需要拦住明显无效格式，比如漏@、多个@、无域名、常见拼写错误。
推荐这个平衡可读性与覆盖率的正则：/^[^\s@]+@[^\s@]+\.[^\s@]+$/
立即学习“前端免费学习笔记（深入）”；
- 开头
^[^\s@]+：本地部分不能含空格或@，至少一个字符 -
@：必须有且仅一个 -
[^\s@]+\.[^\s@]+$：域名部分必须含一个点，前后都不能是空格或@ - 它不支持
user+tag@example.com这种合法变体，但绝大多数表单不需要 - 注意：JS中
RegExp.test()对同一实例多次调用会因lastIndex残留导致结果错乱，每次校验前要重置或新建正则对象
如何在提交前触发校验并阻止默认行为
关键不是“怎么写正则”，而是“什么时候跑、失败了怎么反馈”。直接监听submit事件，在里面调用校验逻辑，再用event.preventDefault()拦住提交。
示例代码：
document.getElementById('myForm').addEventListener('submit', function(e) {
const emailInput = document.getElementById('email');
const email = emailInput.value.trim();
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
e.preventDefault();
emailInput.setCustomValidity('请输入有效的邮箱地址');
emailInput.reportValidity(); // 触发浏览器原生气泡提示
} else {
emailInput.setCustomValidity(''); // 清除错误状态
}
});
-
setCustomValidity()设空字符串才能让表单恢复“有效”状态 -
reportValidity()强制显示提示，否则某些浏览器可能不弹气泡 - 别在
input事件里频繁校验，会导致用户每敲一个键都抖一下，体验差
后端校验为什么不能省
前端任何校验都可被绕过——禁用JS、改DOM、抓包重发。真正拦住无效邮箱的只有后端。
- Node.js用
validator.isEmail()比手写正则更可靠，它内置了常见TLD白名单和长度限制 - Python Django用
django.core.validators.EmailValidator，自带国际化域名支持 - 即使校验通过，也要考虑发送验证邮件环节：如果邮箱不存在，SMTP服务器返回5xx错误，得记录日志并通知运维
最常被忽略的一点：邮箱大小写不敏感，但本地部分（@前）理论上区分大小写（虽然Gmail等服务商不区分）。后端统一转小写存储，避免重复注册问题。
