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

今天要跟大家分享的是正则表达式的各种常用验证方式：邮箱，手机号码，身份证，网址，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')

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

下载地址

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

正则表达式验证邮箱、身份证、手机号等
正则表达式验证邮箱.身份证.手机号等 1.参考文献 2. 案例演练验证: 邮箱-手机-身份证 3. 案例演练验证: 邮箱-手机-身份证-姓名 1.参考文献主要参考了"常用正则表达式- ...
JavaScript使用正则表达式进行邮箱表单验证实例
*******JavaScript使用正则表达式进行邮箱表单验证实例************ 1.在JavaScript中也可以使用正则表达式对表单输入的数据进行验证格式如下 /正则表达式/.test ...
JavaScript面试篇之正则表达式：“get-element-by-id”如何转化成驼峰，常用邮箱、身份证、QQ号等信息如何校验等等
JavaScript面试篇之正则表达式:"get-element-by-id"如何转化成驼峰,常用邮箱.身份证.QQ号等信息如何校验等等前言一.简介二.匹配规则 1.修饰符 ...
el vue 手机号_Vue 正则表达式验证邮箱和手机号码
el-form绑定:rules="addFormRules": el-form-item绑定prop="name" 2.正则表达式验证邮箱和手机号码 expor ...
python使用正则表达式验证邮箱地址语法有效性
python使用正则表达式验证邮箱地址语法有效性 #python使用正则表达式验证邮箱地址语法有效性 import re # mail regular expression formula# rege ...
html5邮箱验证正则表达式,js正则表达式验证邮箱
问题描述: 使用js的正则表达式验证邮箱注意事项: 1.在正则表达式的前后要加上^在后面要加上$否则会出现错误: 2.在使用单个字符是使用[xx]括起来代码: function validateE ...
java正则验证网址_java正则表达式验证邮箱、IP地址、手机号码
1.java验证IP地址: Matcher matcher = pattern.matcher("127.400.600.2"); //以验证127.400.600.2为例 Sys ...
java正则表达式验证邮箱、IP地址、手机号码
1.java验证IP地址: Pattern pattern = Pattern.compile("\\b((?!\\d\\d\\d)\\d+|1\\d\\d|2[0-4]\\d|25[0-5 ...
JavaScript正则表达式验证邮箱
我的代码一开始如下: 然后我的表单就一直没法成功调用这个函数,后面我发现,这里的跟java的不一样,reg里的正则表达式必须得用 ' / ',双引号赋值它不识别,还有下面调用test函数,上面if语句 ...

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

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

最新文章

热门文章