今天要跟大家分享的是正则表达式的各种常用验证方式：邮箱，手机号码，身份证，网址，QQ，邮政编码，中文；
之前一直不知道正则是咋回事，网上查阅的也是看得蒙头转向，只要搞懂了表达式的各种语法符号，做一个验证还是比较容易的，逻辑还在，江山依旧。现在我就跟大家分享分享正则验证，这里我将上诉集中验证都封装在proof函数里面，通过json方式将它们的正则表达式存储下来，通过调用不同的json键值实现不同的验证方式，妈妈再也不用担心我满世界的找各种验证啦.......
演示地址
开打啦！额，不对，开工了：
第一步：布局，直接上图吧，就不详细说明结构了
<label><span>邮箱：</span><input type="text" placeholder="" id="email"></label><label><span>手机号码：</span><input type="text" placeholder="" id="phone"></label><label><span>身份证：</span><input type="text" placeholder="" id="idcard"></label><label><span>网址：</span><input type="text" placeholder="" id="website"></label><label><span>QQ号：</span><input type="text" placeholder="" id="qq"></label><label><span>邮政编码：</span><input type="text" placeholder="" id="zipcode"></label><label><span>中文：</span><input type="text" placeholder="" id="chinese"></label>
第二步：各种验证表达式，这里定义了一个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.邮箱格式：
xxxx@xx.xxx
xxxx@xx.xxx.xxx
xxx.xxxx@xx.xxx
xxx.xxxx@xx.xxx.xxx
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的键名称，要加引号，
结构代码如下：
<label><span>邮箱：</span><input type="text" placeholder="" id="email"></label><label><span>手机号码：</span><input type="text" placeholder="" id="phone"></label><label><span>身份证：</span><input type="text" placeholder="" id="idcard"></label><label><span>网址：</span><input type="text" placeholder="" id="website"></label><label><span>QQ号：</span><input type="text" placeholder="" id="qq"></label><label><span>邮政编码：</span><input type="text" placeholder="" id="zipcode"></label><label><span>中文：</span><input type="text" placeholder="" id="chinese"></label>
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')
目前就这些，希望能帮助到大家！
下载地址
