HTML表单之邮箱验证

学习HTML，表单是一个很重要的知识，而表单最常用的可能就是表单的验证了；下面我介绍验证邮箱的一种方法：

先上代码：（注：这个代码是可以运行的，可以自己试试，把重点放在js和表单里面！）

<!DOCTYPE html>
<html><head><title>表单之邮箱验证.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">body{background-image: url(https://imgchr.com/content/images/system/home_cover_1552414407320_3a5f92.jpg);background-repeat: no-repeat;/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */    background-attachment: fixed;  /*此条属性必须设置否则可能无效*/    /* 让背景图基于容器大小伸缩 */   background-size: cover;  /* 设置背景颜色，背景图加载过程中会显示背景色 */   background-color: #CCCCCC;}#user_reg{font-family: 微软雅黑;font-size: 40px;text-align: center;margin-top: 200px;}form{width: 600px;                    /*设置宽度，方便使其居中*/margin: 40px auto auto auto;  /*上右下左*/font-size: 25px;}input{height: 30px;width: 14em;font-size: 20px;}#username[value]{color: gray;}#username1[value]{color: black;}</style></head><script type="text/javascript">//onblur失去焦点事件，用户离开输入框时执行 JavaScript 代码：//函数：验证邮箱格式function isEmail(strEmail){//定义正则表达式的变量:邮箱正则var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;console.log(strEmail);//文本框不为空，并且验证邮箱正则成功，给出正确提示if(strEmail != null && strEmail.search(reg) != -1){document.getElementById("test_user").innerHTML = "<font color='green' size='4px'>√邮箱格式正确！</font>";}else{document.getElementById("test_user").innerHTML = "<font color='red' size='4px'>邮箱格式错误！</font>";}}</script><body><div id="user_reg">验证邮箱:</div><form action="" method="post" name="form"><table><tr><td>请输入账号：</td><td><input type="text" id="username" name="username" value="只能用邮箱注册" onclick="username.value='',username.id='username1'" onblur="isEmail(this.value)"/></td><td id="test_user">&nbsp;</td></tr></table></form>
</body>
</html>

这是效果图：

来看下主要代码：

HTML部分：

<body><div id="user_reg">验证邮箱:</div><form action="" method="post" name="form"><table><tr><td>请输入账号：</td><td><input type="text" id="username" name="username" value="只能用邮箱注册" onclick="username.value='',username.id='username1'" onblur="isEmail(this.value)"/></td><td id="test_user">&nbsp;</td></tr></table></form>
</body>

简单分析下：

1. 首先是提示用户，该文本框只能填写邮箱，用 value 设置初始值，显示在框内；添加事件onclick ，当用户鼠标单击时触发，使其文本框的值置为 “” ，并且使其ID改变，方便改变样式（要看效果，可以自己拷贝代码运行）。

补充下：不过，我不建议使用这种方法，因为后来我了解到 input 有个属性可以轻松解决这个问题：spaceholder，属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。详见（w3c文档）：http://www.w3school.com.cn/html5/html_5_form_attributes.asp

2. 然后添加onblur 事件，当焦点离开该文本框时触发事件，作用就JS 里面在详解。

3.后面还有个格子<td id="test_user"> </td>，是为了显示验证结果的，当然你也可以用 alert("提示信息") 显示验证结果。

4.如果这个方法要在提交表单前验证，并且带回返回值，应该还要在定义函数时加上 return 语句，并且触发事件要这样写：

"return isEmail(this.value)" ，这样当验证成功时，返回true，可以提交表单；验证失败，返回false，禁止其提交表单。（详见我的另一篇文章：https://blog.csdn.net/weixin_41287260/article/details/83061037）

JavaScript 部分：

<script type="text/javascript">//onblur失去焦点事件，用户离开输入框时执行 JavaScript 代码：//函数：验证邮箱格式function isEmail(strEmail){//定义正则表达式的变量:邮箱正则var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;console.log(strEmail);//文本框不为空，并且验证邮箱正则成功，给出正确提示if(strEmail != null && strEmail.search(reg) != -1){document.getElementById("test_user").innerHTML = "<font color='green' size='4px'>√邮箱格式正确！</font>";}else{document.getElementById("test_user").innerHTML = "<font color='red' size='4px'>邮箱格式错误！</font>";}}</script>

简单分析下：

1. 先看下函数名：isEmail(strEmail) ，是含参数的，由调用函数那里我们可以知道strEmail 的值是这个文本框的value ；而且

我这里也用console.log(strEmail); 进行验证了，（当然alert（strEmail）也可以，看个人喜好吧！）。

当然，你也可以定义不含参的函数：isEmail( )；定义时用var username = document.getElementById("username1").value;

也可以得到同样的效果。

2. 然后定义邮箱正则，这个要是你足够厉害可以去琢磨，但是火候不够就去百度搜，别人已经找了一大堆验证各种问题的正则表达式。

3.验证正则我这里用的是：strEmail.search(reg) != -1 ，该语句是验证通过的语句。当然你也可以用 reg.test(strEmail) 来验证，通过是返回true。

4.如果文本框不为空，并且验证邮箱通过，在（上面我说个的那个）表格里给出（绿色的）验证正确提示，否则则给出（红色）验证错误提示。

来看看效果怎么样吧：

这是原始页面（请注意看里面的字是灰色的）：

下面这张是点击文本框后的图（忽略截图大小问题）：文本框的字消失了

填写非邮箱内容后，右侧给出红色错误提示：

填写邮箱格式信息：右侧给出绿色正确提示：

the end。

2018.12.8更新

提供个正则文档，有需要可以参考下：

链接：https://pan.baidu.com/s/1_1pxOIkEhOlTsxSnTRL9cg
提取码：gpx8
复制这段内容后打开百度网盘手机App，操作更方便哦。

2019年9月25日更新：

添加测试地址： https://codepen.io/yansheng836/pen/pozYaEv，注：背景使用了一张在线照片，和文中照片不同。