邮件格式验证和手机号验证
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>注册</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/basic.css"/>
<link href="css/login.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="login-boxtitle">
<a href="index.html"><img alt="" src="images/logobig.png"/></a>
</div>
<div class="res-banner">
<div class="res-main">
<div class="login-banner-bg"><span></span><img src="images/big.png"/></div>
<div class="login-box">
<div class="mr-tabs" id="doc-my-tabs">
<ul class="mr-tabs-nav mr-nav mr-nav-tabs mr-nav-justify">
<li class="mr-active"><a href="">注册</a></li>
</ul>
<div class="mr-tabs-bd">
<div class="mr-tab-panel mr-active">
<form method="post">
<div class="user-email">
<label for="email"><i class="mr-icon-envelope-o"></i></label>
<input type="email" name="" id="email" placeholder="请输入邮箱账号">
</div>
<div class="user-pass">
<label for="password"><i class="mr-icon-lock"></i></label>
<input type="password" name="" id="password" placeholder="设置密码">
</div>
<div class="user-pass">
<label for="passwordRepeat"><i class="mr-icon-lock"></i></label>
<input type="password" name="" id="passwordRepeat" placeholder="确认密码">
</div>
<div class="user-pass">
<label for="passwordRepeat"><i class="mr-icon-mobile"></i><span style="color:red;margin-left:5px">*</span></label>
<input type="text" name="" id="tel" placeholder="请输入手机号">
</div>
</form>
<div class="login-links">
<label for="reader-me">
<input id="reader-me" type="checkbox"> 点击表示您同意商城《服务协议》
</label>
<a href="login.html" class="mr-fr">登录</a>
</div>
<div class="mr-cf">
<input type="submit" name="" onclick="mr_verify()" value="注册" class="mr-btn mr-btn-primary mr-btn-sm mr-fl">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer ">
<div class="footer-hd ">
<p>
<a href="http://www.mingrisoft.com/" target="_blank">明日科技</a>
<b>|</b>
<a href="index.html">商城首页</a>
<b>|</b>
<a href="#">支付宝</a>
<b>|</b>
<a href="#">物流</a>
</p>
</div>
<div class="footer-bd ">
<p>
<a href="http://www.mingrisoft.com/Index/ServiceCenter/aboutus.html" target="_blank">关于明日</a>
<a href="#">合作伙伴</a>
<a href="#">联系我们</a>
<a href="#">网站地图</a>
<em>© 2016-2025 mingrisoft.com 版权所有</em>
</p>
</div>
</div>
</body>
<script>
function mr_verify(){
//获取表单对象
var email=document.getElementById("email");
var password=document.getElementById("password");
var passwordRepeat=document.getElementById("passwordRepeat");
var tel=document.getElementById("tel");
//验证项目是否为空
if(email.value==='' || email.value===null){
alert("邮箱不能为空！");
return;
}
if(password.value==='' || password.value===null){
alert("密码不能为空！");
return;
}
if(passwordRepeat.value==='' || passwordRepeat.value===null){
alert("确认密码不能为空！");
return;
}
if(tel.value==='' || tel.value===null){
alert("手机号码不能为空！");
return;
}
if(password.value!==passwordRepeat.value ){
alert("密码设置前后不一致！");
return;
}
//验证邮件格式
apos = email.value.indexOf("@")
dotpos = email.value.lastIndexOf(".")
if (apos < 1 || dotpos - apos < 2) {
alert("邮箱格式错误！");
}
else {
alert("邮箱格式正确！");
}
//验证手机号格式
if(isNaN(tel.value)){
alert("手机号请输入数字！");
return;
}
if(tel.value.length!==11){
alert("手机号是11个数字！");
return;
}
alert('注册成功！');
}
</script>
</html>邮件格式验证和手机号验证代码详解
这段代码是一个用户注册页面的验证功能，重点验证邮箱格式、手机号格式、密码一致性等。让我详细讲解邮件格式验证和手机号验证的实现原理。
一、整体验证流程
text
用户点击"注册"按钮 ↓ 调用 mr_verify() 函数 ↓ 步骤1：获取表单元素的值 ↓ 步骤2：检查是否为空 ↓ 步骤3：检查密码是否一致 ↓ 步骤4：验证邮箱格式 ↓ 步骤5：验证手机号格式 ↓ 步骤6：所有验证通过 → 注册成功
二、邮件格式验证代码详解
核心代码
javascript
//验证邮件格式apos = email.value.indexOf("@")dotpos = email.value.lastIndexOf(".")if (apos < 1 || dotpos - apos < 2) {
alert("邮箱格式错误！");}else {
alert("邮箱格式正确！");}1、indexOf("@") 是什么？
| 项目 | 说明 |
|---|---|
| 含义 | 查找字符串中 "@" 符号第一次出现的位置（索引） |
| 返回值 | 找到则返回位置（从0开始），没找到则返回 -1 |
| 示例 | "abc@def.com".indexOf("@") → 返回 3 |
2、lastIndexOf(".") 是什么？
| 项目 | 说明 |
|---|---|
| 含义 | 查找字符串中 "." 符号最后一次出现的位置 |
| 返回值 | 找到则返回位置，没找到则返回 -1 |
| 示例 | "abc@def.com".lastIndexOf(".") → 返回 7 |
3、验证规则解析
| 条件 | 含义 | 说明 |
|---|---|---|
apos < 1 | @ 不在第1个字符之后 | 邮箱必须有 @，且 @ 不能是第一个字符 |
dotpos - apos < 2 | @ 和 . 之间至少有一个字符 | @ 后面必须有域名，且 . 不能紧挨着 @ |
4、邮箱格式验证示例
| 邮箱地址 | apos | dotpos | apos < 1 | dotpos - apos < 2 | 结果 |
|---|---|---|---|---|---|
abc@def.com | 3 | 7 | false | 7-3=4 ≥2 → false | ✅ 正确 |
a@b.com | 1 | 3 | 1<1? false | 3-1=2 ≥2 → false | ✅ 正确 |
@def.com | 0 | 4 | 0<1 → true | - | ❌ 错误 |
abc@.com | 3 | 4 | false | 4-3=1 <2 → true | ❌ 错误 |
abc@defcom | 3 | -1 | false | -1-3=-4 <2 → true | ❌ 错误 |
5、邮箱验证的完整逻辑
javascript
// 标准邮箱格式：xxx@yyy.zzz// ↓ ↓// 用户名 域名.后缀// ↑ ↑// apos dotpos// 条件1：@ 不能在开头，所以 apos 必须 ≥ 1// 条件2：@ 和 . 之间至少有1个字符，所以 dotpos - apos ≥ 2
6、更好的邮箱正则表达式写法
虽然当前代码用 indexOf 和 lastIndexOf 实现了基本验证，但更专业的做法是使用正则表达式：
javascript
// 更严格的邮箱验证function validateEmail(email) {
// 正则表达式含义：
// ^[a-zA-Z0-9._%+-]+ → 用户名：字母/数字/._%+-
// @ → @符号
// [a-zA-Z0-9.-]+ → 域名：字母/数字/.-
// \. → 点号
// [a-zA-Z]{2,}$ → 后缀：2位以上字母
var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return emailRegex.test(email);}三、手机号验证代码详解
核心代码
javascript
//验证手机号格式if(isNaN(tel.value)){
alert("手机号请输入数字！");
return;}if(tel.value.length!==11){
alert("手机号是11个数字！");
return;}1、isNaN() 是什么？
| 项目 | 说明 |
|---|---|
| 含义 | Is Not a Number（是不是"不是数字"） |
| 返回值 | true = 不是数字，false = 是数字 |
| 示例 | isNaN("123") → false（是数字）isNaN("abc") → true（不是数字） |
2、验证规则
| 条件 | 含义 | 说明 |
|---|---|---|
isNaN(tel.value) | 检查输入是否为数字 | 如果为真（不是数字），弹出错误 |
tel.value.length !== 11 | 检查长度是否为11位 | 手机号必须是11位数字 |
3、手机号验证示例
| 输入值 | isNaN() | length !== 11 | 结果 |
|---|---|---|---|
13812345678 | false（是数字） | 11 !== 11 → false | ✅ 正确 |
1381234567 | false | 10 !== 11 → true | ❌ 长度错误 |
138123456789 | false | 12 !== 11 → true | ❌ 长度错误 |
1381234abcd | true | - | ❌ 包含字母 |
四、完整验证流程图
text
┌─────────────────────────────────────────────────────────────┐
│ mr_verify() 函数执行 │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ 步骤1：获取表单值 │
│ email = document.getElementById("email").value │
│ password = document.getElementById("password").value │
│ passwordRepeat = document.getElementById("passwordRepeat").value │
│ tel = document.getElementById("tel").value │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ 步骤2：空值验证 │
│ if (email === '' || email === null) → alert("邮箱不能为空") │
│ if (password === '' || password === null) → alert(...) │
│ if (passwordRepeat === '' || passwordRepeat === null) → ... │
│ if (tel === '' || tel === null) → alert(...) │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ 步骤3：密码一致性验证 │
│ if (password !== passwordRepeat) → alert("密码不一致") │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ 步骤4：邮箱格式验证 │
│ apos = email.indexOf("@") │
│ dotpos = email.lastIndexOf(".") │
│ if (apos < 1 || dotpos - apos < 2) → alert("邮箱格式错误") │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ 步骤5：手机号格式验证 │
│ if (isNaN(tel)) → alert("手机号请输入数字") │
│ if (tel.length !== 11) → alert("手机号是11个数字") │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ 步骤6：全部通过 → alert("注册成功！") │
└─────────────────────────────────────────────────────────────┘五、代码存在的问题及改进建议
当前代码的问题
| 问题 | 说明 |
|---|---|
| 邮箱验证不够严格 | abc@def 这种没有点号的格式也会通过 |
| 手机号验证不完整 | 只验证了11位数字，没验证开头号码（如138、139等） |
| 没有阻止空字符串提交 | return 后继续执行了邮箱验证 |
| 逻辑问题 | 邮箱验证失败后没有 return，会继续执行后面的验证 |
修复后的完整代码
javascript
function mr_verify() {
// 获取表单对象
var email = document.getElementById("email");
var password = document.getElementById("password");
var passwordRepeat = document.getElementById("passwordRepeat");
var tel = document.getElementById("tel");
// 获取值并去除首尾空格
var emailVal = email.value.trim();
var passwordVal = password.value.trim();
var passwordRepeatVal = passwordRepeat.value.trim();
var telVal = tel.value.trim();
// 1. 空值验证
if (emailVal === '') {
alert("邮箱不能为空！");
email.focus(); // 让光标回到输入框
return false;
}
if (passwordVal === '') {
alert("密码不能为空！");
password.focus();
return false;
}
if (passwordRepeatVal === '') {
alert("确认密码不能为空！");
passwordRepeat.focus();
return false;
}
if (telVal === '') {
alert("手机号码不能为空！");
tel.focus();
return false;
}
// 2. 密码一致性验证
if (passwordVal !== passwordRepeatVal) {
alert("密码设置前后不一致！");
passwordRepeat.focus();
return false;
}
// 3. 密码强度验证（至少6位）
if (passwordVal.length < 6) {
alert("密码长度不能少于6位！");
password.focus();
return false;
}
// 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;
}
// 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;
}
// 所有验证通过
alert('注册成功！');
return true;}六、总结
| 验证类型 | 当前代码实现 | 验证规则 | 建议改进 |
|---|---|---|---|
| 邮箱格式 | indexOf("@") + lastIndexOf(".") | 必须有@，@不在开头，@和.之间有字符 | 使用正则表达式 |
| 手机号格式 | isNaN() + length !== 11 | 必须是11位数字 | 增加首位验证（1开头，第二位3-9） |
一句话总结：邮箱验证通过查找 @ 和 . 的位置来判断格式是否正确；手机号验证通过 isNaN() 判断是否为数字，再判断长度是否为11位；但当前代码存在一些逻辑问题（邮箱验证失败后没有 return），且验证规则不够严格，建议使用正则表达式进行更精确的验证