邮箱格式验证（正则表达式版本）
// 4. 邮箱格式验证（正则表达式版本）
var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailRegex.test(emailVal)) {
alert("邮箱格式错误！示例：user@example.com");
email.focus();
return false;
}邮箱验证正则表达式逐字详解
javascript
var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;一、正则表达式的整体结构
text
/^ [a-zA-Z0-9._%+-]+ @ [a-zA-Z0-9.-]+ \. [a-zA-Z]{2,} $/
│ └────────┬────────┘ │ └──────┬──────┘ │ └─────┬─────┘ │
│ │ │ │ │ │ │
│ 用户名 @ 域名 . 后缀 结束
│ │ │ │ │ │
开始 └───────────┴────────┴────────┴───────┘二、逐部分详解
1、/^ 和 $/
| 符号 | 含义 | 作用 |
|---|---|---|
^ | 开始锚点 | 表示字符串的开头，确保从第一个字符开始匹配 |
$ | 结束锚点 | 表示字符串的结尾，确保匹配到最后一个字符结束 |
为什么需要它们？
没有
^："abc@def.com"和"xxxabc@def.com"都会匹配（错误）没有
$："abc@def.com"和"abc@def.comxxx"都会匹配（错误）有
^和$：确保整个字符串完全符合规则，没有多余字符
2、用户名部分：[a-zA-Z0-9._%+-]+
regex
[a-zA-Z0-9._%+-]+│ └─────┬─────┘ │ │ │ │ 字符集 加号（表示至少1个）
[ ... ] 是什么？
方括号表示字符集，匹配其中任意一个字符
例如：
[abc]匹配a、b、c中的任意一个
字符集中允许的字符
| 字符 | 含义 | 说明 |
|---|---|---|
a-z | 小写字母 | a 到 z 任意字母 |
A-Z | 大写字母 | A 到 Z 任意字母 |
0-9 | 数字 | 0 到 9 任意数字 |
. | 点号 | 邮箱用户名中允许的点号 |
_ | 下划线 | 常见于邮箱 |
% | 百分号 | 某些邮箱允许 |
+ | 加号 | 某些邮箱允许（如 Gmail 的别名功能） |
- | 减号 | 某些邮箱允许 |
+ 是什么？
加号表示至少1个，最多不限
所以用户名不能为空，至少要有1个字符
3、@ 符号：@
regex
@
就是字面上的
@符号分隔用户名和域名
邮箱中必须有且只有一个
@
4、域名部分：[a-zA-Z0-9.-]+
regex
[a-zA-Z0-9.-]+
| 字符 | 含义 | 说明 |
|---|---|---|
a-z | 小写字母 | 域名允许字母 |
A-Z | 大写字母 | 域名不区分大小写 |
0-9 | 数字 | 域名允许数字 |
. | 点号 | 域名中的点（如 mail.google.com） |
- | 减号 | 域名中允许连字符 |
注意：
+表示域名至少1个字符点号在域名中是分隔符，不是结尾
5、点号：\.
regex
\.
| 写法 | 含义 | 说明 |
|---|---|---|
. | 匹配任意字符 | 这是正则表达式的特殊字符 |
\. | 匹配字面点号 | 用反斜杠转义，表示真正的点号 |
为什么要转义？
在正则表达式中，
.是特殊字符，匹配除换行外的任意字符要匹配真正的点号（如
com前面的点），必须用\.转义
6、后缀部分：[a-zA-Z]{2,}
regex
[a-zA-Z]{2,}| 部分 | 含义 | 说明 |
|---|---|---|
[a-zA-Z] | 字母字符集 | 只允许字母（如 com、cn、org） |
{2,} | 量词 | 至少2个字符，最多不限 |
常见后缀示例：
| 后缀 | 长度 | 是否匹配 |
|---|---|---|
com | 3 | ✅ 匹配 |
cn | 2 | ✅ 匹配 |
org | 3 | ✅ 匹配 |
io | 2 | ✅ 匹配 |
c | 1 | ❌ 不匹配（至少需要2个） |
a1 | 2 | ❌ 不匹配（包含数字，只允许字母） |
三、整体匹配流程图
text
输入：abc123@example.com
↓
┌─────────────────────────────────────────────────────────────┐
│ ^ 检查字符串开头 │
│ ↓ │
│ a b c 1 2 3 [a-zA-Z0-9._%+-]+ 匹配成功 │
│ ↓ │
│ @ 匹配字面 @ 符号 │
│ ↓ │
│ e x a m p l e [a-zA-Z0-9.-]+ 匹配成功 │
│ ↓ │
│ . 匹配字面点号 (\.) │
│ ↓ │
│ c o m [a-zA-Z]{2,} 匹配成功 │
│ ↓ │
│ $ 检查字符串结尾 │
└─────────────────────────────────────────────────────────────┘
↓
匹配成功 ✅四、测试示例
| 邮箱地址 | 匹配结果 | 原因 |
|---|---|---|
user@example.com | ✅ 成功 | 标准格式 |
user.name@example.co.uk | ❌ 失败 | 后缀有多个点号，正则只匹配最后一个 |
user+filter@gmail.com | ✅ 成功 | 加号在用户名中是允许的 |
user@sub.domain.com | ✅ 成功 | 域名中可以有点号 |
user@example.c | ❌ 失败 | 后缀只有1个字符 |
@example.com | ❌ 失败 | 用户名不能为空 |
user@example | ❌ 失败 | 没有点号和后缀 |
user@.com | ❌ 失败 | 域名不能以点号开头 |
五、test() 方法详解
javascript
emailRegex.test(emailVal)
| 部分 | 含义 |
|---|---|
emailRegex | 正则表达式对象 |
.test() | 正则表达式的方法，用于测试字符串是否匹配 |
emailVal | 要测试的字符串 |
返回值：
true：字符串匹配正则表达式false：字符串不匹配
示例：
javascript
var regex = /^\d+$/; // 匹配纯数字regex.test("123"); // trueregex.test("abc"); // false六、验证失败后的处理
javascript
if (!emailRegex.test(emailVal)) {
alert("邮箱格式错误！示例：user@example.com");
email.focus(); // 让光标回到邮箱输入框
return false; // 停止继续执行}| 代码 | 作用 |
|---|---|
! | 取反，如果匹配失败（false），进入条件 |
alert() | 弹出错误提示 |
email.focus() | 将光标定位到邮箱输入框，方便用户修改 |
return false | 终止函数执行，不继续后面的验证 |
七、总结
| 正则部分 | 含义 | 示例匹配 |
|---|---|---|
^ | 字符串开始 | - |
[a-zA-Z0-9._%+-]+ | 用户名（至少1个字符） | user123、john.doe |
@ | @符号 | @ |
[a-zA-Z0-9.-]+ | 域名（至少1个字符） | gmail、mail.example |
\. | 点号 | . |
[a-zA-Z]{2,} | 后缀（至少2个字母） | com、cn、org |
$ | 字符串结束 | - |
一句话总结：这个正则表达式验证的是：用户名@域名.后缀 格式，其中用户名可包含字母数字及 ._%+-，域名可包含字母数字及 .-，后缀必须是至少2个字母，且整个字符串从开头到结尾必须完全符合这个格式