正则表达式验证邮箱、身份证、手机号等

小丫头爱打盹

已于 2022-07-08 20:39:33 修改

阅读量6.6k

点赞数 4

分类专栏： # Javascript 项目实战

于 2022-06-22 20:47:17 首次发布

本文链接：https://blog.csdn.net/Liu_wen_wen/article/details/125416086

版权

正则表达式邮箱验证手机号验证身份证验证姓名验证

关键词由CSDN通过智能技术生成

Javascript 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

项目实战

7 篇文章 0 订阅

订阅专栏

正则表达式验证邮箱、身份证、手机号等

1.参考文献

主要参考了“常用正则表达式—邮箱（Email）”和“邮箱验证正则表达式”两篇文章，超链接和参考的主要内容如下：
正则表达式30分钟入门教程
 常用正则表达式—邮箱（Email）
在这里插入图片描述

分析邮件名称部分：

26个大小写英文字母表示为:  a-zA-Z
数字表示为:  0-9
下划线表示为:  _
中划线表示为:  -
由于名称是由若干个字母、数字、下划线和中划线组成，所以需要用到+表示多次出现
 根据以上条件得出邮件名称表达式： [a-zA-Z0-9_-]+

分析域名部分：

 一般域名的规律为“[N级域名][三级域名.]二级域名.顶级域名”，比如“qq.com”、“www.qq.com”、“mp.weixin.qq.com”、“12-34.com.cn”，分析可得域名类似“** .** .** .**”组成。

“**”部分可以表示为:  [a-zA-Z0-9_-]+
“.**”部分可以表示为:   \.[a-zA-Z0-9_-]+
多个“.**”可以表示为:  (\.[a-zA-Z0-9_-]+)+
 综上所述，域名部分可以表示为:  [a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+

最终表达式：
 由于邮箱的基本格式为“名称@域名”，需要使用“^”匹配邮箱的开始部分，用“$”匹配邮箱结束部分以保证邮箱前后不能有其他字符，所以最终邮箱的正则表达式为：
  ^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$

分析邮件名称部分：

汉字在正则表示为[\u4e00-\u9fa5]
字母和数字表示为A-Za-z0-9
 通过分析得出邮件名称部分表达式为[A-Za-z0-9\u4e00-\u9fa5]+
分析邮件域名部分

 邮件部分可以参考实例1中的分析域名部分。
 得出域名部分的表达式为[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+。

最终表达式：
 我们用@符号将邮箱的名称和域名拼接起来，因此完整的邮箱表达式为
  ^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$

邮箱验证正则表达式
在这里插入图片描述

^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$

2. 案例演练验证：邮箱-手机-身份证

1.自定义邮箱格式正则验证
2.自定义手机号格式正则验证
3.自定义身份证号的正则验证
代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
		<style type="text/css">
			.txt{
				color:red;
				font-size:10px;
			}
		</style>
		<!-- <script type="text/javascript"></script> -->
	</head>

	<body>
		<form action="" method="get" onsubmit="return checkAll()">
		邮箱：
		<input type="text" name="email" id="email" placeholder="邮箱" onblur="checkEmail()">
		<div id="emailTip" class="txt"></div>
		手机号：
		<input type="text" name="phone" id="phone" placeholder="手机号：11位（1开头）" onblur="checkPhone()">
		<div id="phoneTip" class="txt"></div>
		身份证号：
		<input type="text" name="idcard" id="idcard" placeholder="身份证号：18位(4开头，且最后一位为数字或字母。)" onblur="checkIdcard()">
		<div id="idcardTip" class="txt"></div>
		<!-- 汉字：
		<input type="text" name="chinese" id="chinese" placeholder="汉字" onblur="checkChinese()">
		<div id="chineseTip" class="txt"></div> -->
		
		<input type="submit" value="提交" >
		<input type="reset" value="重置" >
		
	<script type="text/javascript">
		//自定义邮箱格式正则验证
		//3.自定义手机号格式正则验证 
		//4.自定义身份证号的正则验证（15位或18位，年月日，尾数为字母或数字）
		//5.定义汉字在2-5之间的验证
		function checkEmail(){
			var yx=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
			
			if(yx.test(email.value)==false){
				emailTip.innerHTML="email格式不对，请重新输入！";
				return false;
			}

			emailTip.innerHTML="";
			return true;
		}
		function checkPhone(){
			var sj=/^1\d{10}$/;

			if(sj.test(phone.value)==false){
				phoneTip.innerHTML="手机号码格式不对，请重新输入！";
				return false;
			}
			phoneTip.innerHTML="";
			return true;
		}

		function checkIdcard(){
			var sfz=/^4\d{16}[a-zA-Z0-9]$/;  

			if(sfz.test(idcard.value)==false){
				idcardTip.innerHTML="身份证格式不对，请重新输入！";  
				return false;
			}
			idcardTip.innerHTML="";
			return true;
		}
		
		/*
		function checkChinese(){
			

			if(){
				chineseTip.innerHTML="中文区间不对，请重新输入！";
				return false;
			}
			chineseTip.innerHTML="";
			return true;
		}
		*/

		function checkAll(){
			var ckE=checkEmail();
			var ckP=checkPhone();
			var ckI=checkIdcard();
			//var ckC=checkChinese();
			
			if(ckE && ckP && ckI){
				return true;
			}
			return false;
		}
	</script>
		
	</body>
</html>

代码运行结果如下：
请添加图片描述

3. 案例演练验证：邮箱-手机-身份证-姓名

注意：验证名字时不能使用id="name " ,浏览器默认name为为关键字,需要换个id名

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
		<style type="text/css">
		.txt{
			color:red;
			font-size:7px;
			height:13px;
		}
		
		</style>
		<!-- <script type="text/javascript"></script> -->
	</head>

	<body>
		<form action="" method="get" onsubmit="return checkAll()">
			邮箱：
			<input type="text" name="email" id="email" placeholder="邮箱" onblur="checkEmail()">
			<div id="emailTip" class="txt"></div>
			手机号：
			<input type="text" name="phone" id="phone" placeholder="手机号" onblur="checkPhone()">
			<div id="phoneTip" class="txt"></div>
			身份证号：
			<input type="text" name="idCard" id="idCard" placeholder="身份证号" onblur="checkIdCard()">
			<div id="idCardTip" class="txt"></div>
			姓名：
			<!-- 注意：这里验证名字时不能使用name 浏览器默认name为为关键字 -->
			<input type="txt" name="name1" id="name1" placeholder="姓名" onblur="checkName()">
			<div id="nameTip" class="txt"></div>

			<input type="submit" value="提交">
			<input type="reset" value="重置">
		</form>
	

	<script type="text/javascript">
	    //自定义邮箱格式正则验证
		//3.自定义手机号格式正则验证 
		//4.自定义身份证号的正则验证（15位或18位，年月日，尾数为字母或数字）
		//5.定义汉字在2-5之间的验证
		
		function checkEmail(){
			//设置正则变量
			var ce=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,6}$/;
			//验证
			if(ce.test(email.value)==false){
				emailTip.innerHTML="邮箱格式不对，请重新输入！";
				return false;
			}
			emailTip.innerHTML="";
			return true;
		}
		function checkPhone(){
			//设置正则变量
			//var cp=/^1\d{10}$/
			var cp=/^(13[234]|15[234]|19[234])\d{8}$/  //前两位：13 15 19 第三位 2或3或4 
			//验证
			if(cp.test(phone.value)==false){
				phoneTip.innerHTML="手机格式不对，请重新输入";
				return false;
			}
			phoneTip.innerHTML="";
			return true;
		}

		function checkIdCard(){
			//设置正则变量
			var ci=/^4\d{16}\w$/  // 共18位 4开头 最后一位为数字或字母 \w等效于[a-zA-Z0-9]
			//验证
			if(ci.test(idCard.value)==false){
				idCardTip.innerHTML="格式输入不对，请重新输入";
				return false;
			}
			idCardTip.innerHTML="";
			return true;
		}

		function checkName(){
			//设置变量
			var cn=/^[\u4e00-\u9fa5]{3,6}$/;    //名字：3-6个汉字
			//验证
			if(cn.test(name1.value)==false){
				nameTip.innerHTML="格式不对，请重新输入";
				return false;
			}
			nameTip.innerHTML="";
			return true;
		}

		function checkAll(){
			var c1=checkEmail();
			var c2=checkPhone();
			var c3=checkIdCard();
			var c4=checkName();
			
			if(c1 && c2 && c3 && c4){
				return true;
			}
			return false
		}

	</script>
		
	</body>
</html>