JavaScript之正则表达式验证邮箱，手机号码，身份证，网址，QQ，邮政编码，中文

今天要跟大家分享的是正则表达式的各种常用验证方式：邮箱，手机号码，身份证，网址，QQ，邮政编码，中文；

之前一直不知道正则是咋回事，网上查阅的也是看得蒙头转向，只要搞懂了表达式的各种语法符号，做一个验证还是比较容易的，逻辑还在，江山依旧。现在我就跟大家分享分享正则验证，这里我将上诉集中验证都封装在proof函数里面，通过json方式将它们的正则表达式存储下来，通过调用不同的json键值实现不同的验证方式，妈妈再也不用担心我满世界的找各种验证啦.......

演示地址

开打啦！额，不对，开工了：

第一步：布局，直接上图吧，就不详细说明结构了

邮箱：
	手机号码：
	身份证：
	网址：
	QQ号：
	邮政编码：
	中文：

第二步：各种验证表达式，这里定义了一个json对象 ： re存储这几个表达式

 var re = {
	 'email':/^\w+(\.)?(\w+)?@[0-9a-z]+(\.[a-z]+){1,3}$/,//邮箱
	 'phone':/^((13[0-9])|(15[0-37-9])|(18[0235789])|(14[57]))\d{8}$/,//电话
	 'idcard':/^[1-9]((\d{14})|(\d{17})|(\d{16}x))$/i,//身份证
	 'website':/^[a-zA-Z]+:\/\/[^\s]*$/,//网址
	 'qq':/^[1-9][0-9]{4,10}$/,//QQ
	 'zipcode':/^[1-9]\d{5}$/,//邮政编码
	 'chinese':/^[\u4e00-\u9fa5]+$/,//中文
 };

说明：（每一条的格式啥的都在百度上确认过，如果有遗漏或者错误，欢迎指出纠正，谢谢！大半夜的找度娘，我也是饥渴难耐啊~~~）

1.邮箱格式：

 [email protected]

 [email protected]
 [email protected]
 [email protected]

2.电话号码格式：

移动号码段:139、138、137、136、135、134、150、151、152、157、158、159、182、183、187、188、147
联通号码段:130、131、132、136、185、186、145
电信号码段:133、153、180、189网络

归纳起来就是13开头的，第三位0-9都有；15开头的，第三位0123789几个数字；18开头的，第三位0235789；14开头的，第三位只有57；

当然以后若有新的，再来改，切记电话号码11位，这里没有把座机号码写进来。

3.身份证格式：

身份证有15位（之前的，现在也在用）和18位
15位身份证没有校验位,所以末尾没有X
18位有检验位，所以末尾有数字和X两种,这里x不区分大小写

4.QQ号目前的长度最长为11位，感觉快超过电话号码了- -；

5.中国邮政编码长度为6；

第三步：测试，封装

测试的时候是一条一条做的，最后验证ok了就将它们封装起来，方便以后调用；

主要用到的方法是test方法，函数名称为proof；验证的事件是文本框失去焦点的时候触发，通过边框颜色为绿色，失败为红色

代码：

function proof(id,method){
  id.onblur = function(){
	  var str = id.value;
	  var re = {
				  'email':/^\w+(\.)?(\w+)?@[0-9a-z]+(\.[a-z]+){1,3}$/,
				  'phone':/^((13[0-9])|(15[0-37-9])|(18[0235789])|(14[57]))\d{8}$/,
				  'idcard':/^[1-9]((\d{14})|(\d{17})|(\d{16}x))$/i,
				  'website':/^[a-zA-Z]+:\/\/[^\s]*$/,
				  'qq':/^[1-9][0-9]{4,10}$/,
				  'zipcode':/^[1-9]\d{5}$/,
				  'chinese':/^[\u4e00-\u9fa5]+$/
			  };
	  for(var attr in re){
			  if(attr == method){
			  if(str != null){
				  if(re[attr].test(str)){
					  id.style.borderColor = '#0F0';
					  }else{
						  id.style.borderColor = 'red';
						  }
			  }else{
				  id.style.borderColor = 'red';
				  }
								  
			  }
		  }
	  }
}

如果想要通过点击某一个按钮触发验证事件，只需添加一个参数，修改一条代码即可，如下：

function proof(btn,id,method){
  btn.onclick = function(){
	  var str = id.value;
	  var re = {
				  'email':/^\w+(\.)?(\w+)?@[0-9a-z]+(\.[a-z]+){1,3}$/,
				  'phone':/^((13[0-9])|(15[0-37-9])|(18[0235789])|(14[57]))\d{8}$/,
				  'idcard':/^[1-9]((\d{14})|(\d{17})|(\d{16}x))$/i,
				  'website':/^[a-zA-Z]+:\/\/[^\s]*$/,
				  'qq':/^[1-9][0-9]{4,10}$/,
				  'zipcode':/^[1-9]\d{5}$/,
				  'chinese':/^[\u4e00-\u9fa5]+$/
			  };
	  for(var attr in re){
			  if(attr == method){
			  if(str != null){
				  if(re[attr].test(str)){
					  id.style.borderColor = '#0F0';
					  }else{
						  id.style.borderColor = 'red';
						  }
			  }else{
				  id.style.borderColor = 'red';
				  }
								  
			  }
		  }
	  }
}

第四步：调用

这里注意method对应re的键名称，要加引号，

结构代码如下：

	邮箱：
	手机号码：
	身份证：
	网址：
	QQ号：
	邮政编码：
	中文：

js调用代码如下：

    	var email = document.getElementById("email");
    	var phone = document.getElementById("phone");
    	var idcard = document.getElementById("idcard");
    	var website = document.getElementById("website");
    	var qq = document.getElementById("qq");
    	var zipcode = document.getElementById("zipcode");
    	var chinese = document.getElementById("chinese");
		
		proof(email,'email')
		proof(phone,'phone')
		proof(idcard,'idcard')
		proof(website,'website')
		proof(qq,'qq')
		proof(zipcode,'zipcode')
		proof(chinese,'chinese')

目前就这些，希望能帮助到大家！

下载地址