讲讲手机号验证
// 5. 手机号验证（完整版）
// 验证是否为纯数字
if (!/^\d+$/.test(telVal)) {
alert("手机号只能包含数字！");
tel.focus();
return false;
}
// 验证长度是否为11位
if (telVal.length !== 11) {
alert("手机号必须是11位数字！");
tel.focus();
return false;
}
// 验证手机号开头（1开头，第二位是3-9）
if (!/^1[3-9]\d{9}$/.test(telVal)) {
alert("请输入有效的手机号码！");
tel.focus();
return false;
}手机号验证代码逐字详解
您给出的这段手机号验证代码分为三个层次，从宽松到严格逐步验证。让我逐行详细讲解。
一、整体验证流程
text
输入手机号：13812345678 ↓ 第一层：是否为纯数字？ → ✅ 是纯数字 ↓ 第二层：长度是否为11位？ → ✅ 11位 ↓ 第三层：格式是否合法？ → ✅ 1开头，第二位是3 ↓ 验证通过 ✅
二、第一层验证：是否为纯数字
javascript
if (!/^\d+$/.test(telVal)) {
alert("手机号只能包含数字！");
tel.focus();
return false;}1、正则表达式 ^\d+$ 详解
regex
/^\d+$/ │ ││ │ │ ││ └── 结束锚点 │ │└──── 加号（至少一个） │ └───── 数字（0-9） └─────── 开始锚点
| 部分 | 含义 | 说明 |
|---|---|---|
^ | 开始锚点 | 字符串必须从头开始匹配 |
\d | 数字 | 匹配 0-9 之间的任意一个数字 |
+ | 至少一个 | 前面的 \d 至少出现1次，可以多次 |
$ | 结束锚点 | 字符串必须结束在这里 |
2、测试示例
| 输入 | ^\d+$ 是否匹配 | 说明 |
|---|---|---|
13812345678 | ✅ 匹配 | 全是数字 |
1381234abcd | ❌ 不匹配 | 包含字母 |
138-1234-5678 | ❌ 不匹配 | 包含横线 |
138 1234 5678 | ❌ 不匹配 | 包含空格 |
(空字符串) | ❌ 不匹配 | 长度至少1位 |
3、为什么需要这层验证？
过滤掉包含字母、符号、空格的输入
为后续的长度和格式验证打基础
三、第二层验证：长度是否为11位
javascript
if (telVal.length !== 11) {
alert("手机号必须是11位数字！");
tel.focus();
return false;}1、.length 是什么？
| 项目 | 说明 |
|---|---|
| 含义 | 字符串的属性，返回字符串的字符个数 |
| 来源 | JavaScript 规定好的字符串内置属性 |
| 示例 | "123".length → 3 |
2、验证逻辑
| 输入 | length | !== 11 | 结果 |
|---|---|---|---|
13812345678 | 11 | false | ✅ 通过 |
1381234567 | 10 | true | ❌ 长度不足 |
138123456789 | 12 | true | ❌ 长度超长 |
3、为什么需要这层验证？
中国手机号固定为11位
过滤掉位数不对的输入
四、第三层验证：格式是否合法
javascript
if (!/^1[3-9]\d{9}$/.test(telVal)) {
alert("请输入有效的手机号码！");
tel.focus();
return false;}1、正则表达式 ^1[3-9]\d{9}$ 详解
regex
/^1[3-9]\d{9}$/
││ │ │ ││
││ │ │ │└── 结束锚点
││ │ │ └─── 量词（9次）
││ │ └─────── 数字
││ └─────────── 字符集（3到9）
│└────────────── 数字1
└─────────────── 开始锚点2、逐部分解析
| 部分 | 含义 | 说明 |
|---|---|---|
^ | 开始锚点 | 字符串必须从头开始 |
1 | 数字1 | 手机号第一位必须是1 |
[3-9] | 字符集 | 第二位必须是3、4、5、6、7、8、9中的一个 |
\d{9} | 9位数字 | 后面9位必须是数字 |
$ | 结束锚点 | 字符串必须结束在这里 |
3、\d{9} 详解
regex
\d{9}| 部分 | 含义 |
|---|---|
\d | 数字（0-9） |
{9} | 量词，表示前面的 \d 必须恰好出现9次 |
对比：
| 量词 | 含义 | 示例 |
|---|---|---|
{9} | 恰好9次 | \d{9} 匹配9个数字 |
{9,} | 至少9次 | \d{9,} 匹配9个或更多 |
{9,12} | 9到12次 | \d{9,12} 匹配9-12个 |
4、测试示例
| 手机号 | ^1[3-9]\d{9}$ | 原因 |
|---|---|---|
13812345678 | ✅ 匹配 | 1开头，第二位3，后面9位数字 |
13912345678 | ✅ 匹配 | 1开头，第二位3 |
15012345678 | ✅ 匹配 | 1开头，第二位5 |
18912345678 | ✅ 匹配 | 1开头，第二位8 |
13012345678 | ✅ 匹配 | 1开头，第二位3 |
19912345678 | ✅ 匹配 | 1开头，第二位9 |
11012345678 | ❌ 不匹配 | 第二位是1，不在3-9范围 |
12012345678 | ❌ 不匹配 | 第二位是2，不在3-9范围 |
1881234567 | ❌ 不匹配 | 只有10位，长度不够 |
188123456789 | ❌ 不匹配 | 12位，长度超长 |
188abcdefg | ❌ 不匹配 | 包含字母 |
五、三层验证的关系图
text
┌─────────────────────────────────────────────────────────────┐
│ 输入手机号：188abcdefg │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ 第一层：/^\d+$/ │
│ 检查：是否全是数字？ │
│ 结果：包含字母 → ❌ 不通过 │
│ 输出："手机号只能包含数字！" │
└─────────────────────────────────────────────────────────────┘
↓（如果通过）
┌─────────────────────────────────────────────────────────────┐
│ 第二层：telVal.length !== 11 │
│ 检查：长度是否为11位？ │
│ 结果：长度不对 → ❌ 不通过 │
│ 输出："手机号必须是11位数字！" │
└─────────────────────────────────────────────────────────────┘
↓（如果通过）
┌─────────────────────────────────────────────────────────────┐
│ 第三层：/^1[3-9]\d{9}$/ │
│ 检查：格式是否合法？ │
│ 结果：第二位不对 → ❌ 不通过 │
│ 输出："请输入有效的手机号码！" │
└─────────────────────────────────────────────────────────────┘六、为什么不用一个正则表达式一次验证完？
可以，但分层验证更好
javascript
// 一次验证的写法if (!/^1[3-9]\d{9}$/.test(telVal)) {
alert("请输入有效的手机号码！");
return false;}分层验证的优点
| 优点 | 说明 |
|---|---|
| 错误提示更精确 | 用户能知道具体是什么问题（有字母/长度不对/格式不对） |
| 用户体验更好 | 而不是笼统地说"手机号无效" |
| 调试更方便 | 容易定位问题 |
七、手机号规则总结
| 位置 | 要求 | 说明 |
|---|---|---|
| 第1位 | 必须是 1 | 中国手机号都以1开头 |
| 第2位 | 必须是 3-9 | 目前支持3-9 |
| 第3-11位 | 必须是数字 | 后面9位任意数字 |
常见手机号段示例
| 号段 | 第二位 | 示例 |
|---|---|---|
| 13x | 3 | 130、131、132、133、134、135、136、137、138、139 |
| 15x | 5 | 150、151、152、153、155、156、157、158、159 |
| 18x | 8 | 180、181、182、183、184、185、186、187、188、189 |
| 19x | 9 | 190、191、192、193、195、196、197、198、199 |
八、总结
| 验证层次 | 正则/条件 | 作用 | 错误提示 |
|---|---|---|---|
| 第一层 | /^\d+$/ | 验证是否全是数字 | "手机号只能包含数字！" |
| 第二层 | length !== 11 | 验证长度是否为11位 | "手机号必须是11位数字！" |
| 第三层 | /^1[3-9]\d{9}$/ | 验证格式是否合法 | "请输入有效的手机号码！" |
一句话总结：手机号验证分三步走——先验证是否为纯数字，再验证长度是否为11位，最后验证开头是否为1且第二位在3-9之间，这样逐层过滤可以给用户更精确的错误提示