js 验证邮箱的正则表达式，是前端表单提交前校验邮箱格式的核心方案，主流通用写法可以匹配常规业务邮箱，结构分为本地用户名部分，@符号，域名部分三段，配合 test 方法判断输入内容是否符合邮箱规则，在注册页 找回密码 联系表单里面使用非常普遍，很多新手写正则的时候容易写得过于严格或者过于宽松，导致合法邮箱校验失败，或者错误邮箱被放行，理解正则规则之后，就可以根据项目需求调整匹配范围。之所以需要正则校验邮箱，是因为后端虽然最终还会二次校验，前端提前校验可以减少无效请求，提升用户体验，但是要注意正则只能校验格式，不能证明这个邮箱真实存在，也不能替代发送邮件验证。使用的时候第一步定义邮箱正则表达式，第二步获取输入框里面用户填写的邮箱文本，第三步调用正则 test 方法，返回 true 代表格式合法，false 代表格式错误，第四步根据返回结果提示用户，第五步表单校验全部通过之后再提交请求。总结来说 js 验证邮箱的正则表达式属于前端格式校验工具，通用版本兼顾实用性和兼容性，业务项目优先选用通用版本，不要盲目追求 RFC 全标准，全标准正则会非常复杂，普通业务很难维护。
一 通用推荐正则表达式
const reg = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$/
规则说明
^ 代表字符串开头
[A-Za-z0-9._%+-]+ 本地用户名，支持大小写字母 数字 点 下划线 百分号 加号 减号
@ 必须包含 @符号
[A-Za-z0-9.-]+ 域名主体部分
. 域名里面的点，需要转义
[A-Za-z]{2,} 顶级域名，至少两位字母，比如 com cn org
$ 代表字符串结尾
二 完整 js 代码示例
const emailReg = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$/
function checkEmail email {
return emailReg.test email
}
调用方式
if checkEmail inputValue {
提示格式正确
} else {
提示邮箱格式错误
}
三 可选扩展版本 支持数字顶级域名
如果业务需要支持类似.123 这类特殊域名，可以修改最后一段
/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z0-9]{2,}$/
四 校验规则说明清单
必须包含唯一的 @符号
@前面用户名不能是空
@后面必须存在域名，并且域名至少包含一个点
顶级域名最少两位字符
允许用户名里面部分特殊符号，不允许空格
五 常见错误写法对比表格
| 写法问题 | 后果 |
|---|---|
| 缺少 ^ 和 $ | 会匹配包含邮箱的长文本，不是完整校验 |
| 没有转义点号 | 点会变成任意字符，校验过于宽松 |
| 特殊符号限制过死 | 部分合法企业邮箱会校验失败 |
| 正则写得完全符合 RFC 规范 | 表达式超长，可读性差，维护困难 |
六 重要注意事项
第一 test 方法默认区分大小写，如果想不区分大小写，可以增加 i 修饰符 /i
第二 正则只校验格式，不能确认邮箱是否真实可用，正式业务最好增加邮件验证码验证
第三 不要使用过于严苛的正则，会拦截部分合规邮箱，也不要太宽松，让非法内容通过校验
第四 前端校验只是第一道防线，后端必须再次做邮箱格式校验，防止绕过前端直接提交请求
第五 输入内容要先去除首尾空格，用户经常误输入空格，会导致校验失败
【常见问题】
问题 1 js 验证邮箱的正则表达式为什么加上 i 修饰符
回答 1 js 验证邮箱的正则表达式加上 i 修饰符代表不区分大小写，邮箱域名本身大小写不敏感，加上 i 之后大写小写邮箱都可以正常通过校验。
问题 2 js 验证邮箱的正则表达式为什么一定要写 ^ 和 $
回答 2 js 验证邮箱的正则表达式如果没有 ^ 和 $，test 只会检测字符串里面是否存在匹配片段，不是校验整段内容，会出现类似 abc 邮箱 123 这种非法内容被判定通过，所以必须加上首尾锚定。
问题 3 js 验证邮箱的正则表达式能不能校验邮箱是否真实存在
回答 3 js 验证邮箱的正则表达式只能判断格式是否符合规则，无法验证邮箱账号是否注册真实存在，想要确认真实可用，需要发送邮件验证码完成验证。
【免责申明】
本文内容仅作为前端表单校验学习参考，邮箱 RFC 标准规则非常复杂，示例正则属于业务通用版本，不覆盖全部极端合法邮箱，实际项目请根据业务需求调整。