HTML表单之邮箱验证

久未见 提交于 2019-12-08 00:55:43

学习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="只能用邮箱注册" 
				οnclick="username.value='',username.id='username1'" 
				οnblur="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="只能用邮箱注册" 
				οnclick="username.value='',username.id='username1'" 
				οnblur="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">&nbsp;</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,注:背景使用了一张在线照片,和文中照片不同。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!