前端常用正则表达式校验合集

最新推荐文章于 2024-03-22 17:03:48 发布

夜☞

最新推荐文章于 2024-03-22 17:03:48 发布

阅读量2.3k

点赞数 1

分类专栏： JavaScript 事件高级 vue 正则文章标签：前端正则表达式 es6 vue.js

本文链接：https://blog.csdn.net/qq_41853417/article/details/121750019

版权

JavaScript 事件高级同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

正则

1 篇文章 0 订阅

订阅专栏

前言

前端开发中，一般表单页面都需要填写手机号、邮箱、身份证等，校验用户输入的是否正确，就要用到正则表达式，用正则表达式来匹配。

手机号校验

各大运营商手机号码段

中国移动信号段


	1340	1341	1342	1343	1344	1345		
	
	1346	1347	1348	135		136		137		138		
	
	139		147		150		151		152		157		158		
	
	159		178		182		183		184		187		188		
	
	195		198
	
	144		移动（物联网卡）	1440X号段
	
	147		移动	原3G上网卡、数据卡，部分有语音功能
	
	148		移动（物联网卡）	148XX号段
	
	165		移动(转售）	虚拟运营商
	
	1703	移动(转售）	虚拟运营商
	
	1705	移动(转售）	虚拟运营商
	
	1706	移动(转售）	虚拟运营商
	
	172		移动（物联网卡）	可接打电话、无短信功能
	
	195		移动	19年8月新批号段

中国联通信号段


	130		131		132		155		156		166	
	
	175		176		185		186
	
	140		联通（物联网卡）	1400号段
	
	145		联通（无线上网卡）	数据卡，只能上网，不能打电话发短信
	
	167		联通(转售）	虚拟运营商
	
	1704	联通(转售）	虚拟运营商
	
	1707	联通(转售）	虚拟运营商
	
	1708	联通(转售）	虚拟运营商
	
	1709	联通(转售）	虚拟运营商
	
	171		联通(转售）	虚拟运营商

中国电信信号段


	133		153		173		177		180	
		
	181		189		191		199
	
	1349	电信（卫星专用）	卫星移动电话
	
	141		电信（物联网卡）	1410X号段
	
	149		电信（物联网卡）	物联网等信息化应用专用号段
	
	162		电信(转售）	虚拟运营商
	
	1700	电信(转售）	虚拟运营商
	
	1701	电信(转售）	虚拟运营商
	
	1702	电信(转售）	虚拟运营商
	
	17400	电信（卫星专用）	17400-17405号段
	
	17401	电信（卫星专用）	17400-17405号段
	
	17402	电信（卫星专用）	17400-17405号段
	
	17403	电信（卫星专用）	17400-17405号段
	
	17404	电信（卫星专用）	17400-17405号段
	
	17405	电信（卫星专用）	17400-17405号段
	
	193		电信	19年7月新批号段

其他


	7406	应急通信	工信部应急通信保障中心持有
	
	17407	应急通信	工信部应急通信保障中心持有
	
	17408	应急通信	工信部应急通信保障中心持有
	
	17409	应急通信	工信部应急通信保障中心持有
	
	17410	应急通信	工信部应急通信保障中心持有
	
	17411	应急通信	工信部应急通信保障中心持有
	
	17412	应急通信	工信部应急通信保障中心持有
	
	192		广电
	
	1749	海事卫星专属	北京船舶通信导航有限公司持有

注意：此数据截止于2021年11月份

通过以上号段可以看出，手机号码起始1，第二位是3456789中的任意一个，第三位有的是0-9全段，有的只是部分，如下：

分析后位数字

13和18开头的手机号是全段


	13开头的手机号是全段：13 [0123456789] 比如130，131，132…139
	
	18开头的手机号是全段：18[0123456789] 比如180，181，182…189

15和19开头的手机号后面除4外都有，无154和194


	15 [012356789] 比如150，151，152，153，155…159
	
	19 [012356789] 比如190，191，192，193，195…159

17开头的手机号后面除9外都有


	17 [01235678] 比如170，171，172，173…178

14开头的手机号除2,3外都有，无142和143


	14[01456879] 比如140,141,144，145…149

16开头的手机号后面只有2567


	16[2567] 比如：162,165,166,167

最终得出正则

了解了运营商的最新号段，下面就写出手机号验证的最新正则表达式：


	/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
	
	因为手机号都是以1开始的，所以也可以这样写：
	
	/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/

身份证校验

简单校验

由于我们身份证排列格式比较统一，所以我们校验比较简单


	/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/

	//身份证号（18位）正则
	var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
	//输出 true
	console.log(cP.test("11010519880605371X"));

复杂校验实例

在这里有一个简单的例子，对于身份证校验有一个比较清晰的认识

			<el-form class="demo-ruleForm" :model="row" :rules="rules" ref="checkFrom"  :model="rulesFrom">
			      <	div class="form-item-width" style="justify-content: center;">
              	<el-form-item label="证件号码" label-width="100px" prop="credentialsCode">
                   <el-input
                      class="input-cardnum"
                      name="card"
                      v-model="rulesFrom.credentialsCode"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码" label-width="100px" prop="mobile" >
                    <el-input
                      class="input-cardnum"
                      name="card"
                      v-model="rulesFrom.mobile"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="导游证号码">
                    <el-input clearable v-model="rulesFrom.tourGuideCardNum" placeholder="请输入"></el-input>
                  </el-form-item>
                </div>
              </el-form>

		data(){
		  const idCardValidity = (rule, code, callback) => {
		      var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " };
		      var tip = ""
		      var pass = true
		      if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
		        tip = "身份证号格式错误"
		        pass = false;
		      } else if (!city[code.substr(0, 2)]) {
		        // tip = "地址编码错误"
		        tip="身份证输入错误"
		        pass = false
		      } else {
		        // 18位身份证需要验证最后一位校验位
		        if (code.length === 18) {
		          code = code.split('')
		          // ∑(ai×Wi)(mod 11)
		          // 加权因子
		          var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
		          // 校验位
		          var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
		          var sum = 0
		          var ai = 0
		          var wi = 0
		          for (var i = 0; i < 17; i++) {
		            ai = code[i]
		            wi = factor[i]
		            sum += ai * wi
		          }
		          var last = parity[sum % 11];
		          if (parity[sum % 11] != code[17]) {
		            // tip = "校验位错误"
		            tip="身份证输入错误"
		            pass = false
		          }
		        }
		      }
		      if (!pass) {
		        callback(new Error(tip))
		      } else {
		        callback()
		      }
		    }
		    // 设置手机号的验证规则
		    const phoneRules = (rule, value, callback) => {
		      if (!value) {
		        callback(new Error('请输入联系方式'))
		      } else {
		        const reg = /^1[3|4|5|6|7|8][0-9]\d{8}$/
		        if (reg.test(value)) {
		          callback()
		        } else {
		          return callback(new Error('请输入正确的电话'))
		        }
		      }
		    }
		}
		return {
		rulesFrom：{
		  credentialsCode:" ",
		  mobile:" "
		}，
   rules: {
        credentialsCode: [{ required: true, message: '请输入证件号', trigger: 'blur' },
          {
            pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: '请输入正确的证件号'
          },
          { validator: idCardValidity, trigger: 'blur' }],
        cardphone:[
          {validator:phoneRules,trigger:'blur'}
        ],
        mobile:[
          {required: true,validator:phoneRules,trigger:'blur'}
        ],
        tourGuideCardNum: [
          {required: true,message: '请输入导游证号码',trigger: 'blur'},
          {pattern: /([D][-]\d{4}[-]\d{6})/, message: '请输入正确导游证号码，例：D-0000-000000'}
        ],
      },
}

注意：
1.规则方法写在data里return之前
身份证有效性校验规则来源与百度
校验公示：∑(ai×Wi)(mod 11)

其余正则表达式

校验字符的表达式


	//长度为3-20的所有字符
	^.{3,20}$
	
	//汉字
	^[\u4e00-\u9fa5]{0,}$
	
	//2-4个中文字符正则
	/^[\u4e00-\u9fa5]{2,4}$/   
	
	//英文和数字
	^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
	
	由26个英文字母组成的字符串
	^[A-Za-z]+$
	
	由26个大写英文字母组成的字符串
	^[A-Z]+$
	
	//由26个小写英文字母组成的字符串
	^[a-z]+$
	
	//由数字和26个英文字母组成的字符串
	^[A-Za-z0-9]+$
	
	//由数字、26个英文字母或者下划线组成的字符串
	^\w+$ 或 ^\w{3,20}$
	
	//中文、英文、数字包括下划线
	^[\u4E00-\u9FA5A-Za-z0-9_]+$
	
	//中文、英文、数字但不包括下划线等符号
	^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
	
	//可以输入含有^%&',;=?$\"等字符
	[^%&',;=?$\x22]+
	
	//禁止输入含有~的字符
	[^~\x22]+

数字正则

简单数字正则


	//数字
	 ^[0-9]$
	 
	//至少n位的数字
	^\d{n,}$
	
	//n位的数字
 	^\d{n}$
 	
	//m-n位的数字
	^\d{m,n}$

限制数字正则


	//零和非零开头的数字
	^(0|[1-9][0-9]*)$
	
	//非零开头的最多带两位小数的数字
	^([1-9][0-9]*)+(.[0-9]{1,2})?$
	
	//带1-2位小数的正数或负数
	^(\-)?\d+(\.\d{1,2})?$
	
	//正数、负数、和小数
	^(\-|\+)?\d+(\.\d+)?$
	
	//有两位小数的正实数
	^[0-9]+(.[0-9]{2})?$
	
	//有1~3位小数的正实数
	^[0-9]+(.[0-9]{1,3})?$

整数相关正则


	//正整数正则
	var posPattern = /^\d+$/;
	
	//负整数正则
	var negPattern = /^-\d+$/;
	
	//整数正则
	var intPattern = /^-?\d+$/;
	
	//输出 true
	console.log(posPattern.test("42"));
	
	//输出 true
	console.log(negPattern.test("-42"));
	
	//输出 true
	console.log(intPattern.test("-42"));
	
	非零的正整数
	//^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
	
	//非零的负整数
	'^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$'
	
	//非负整数
	^\d+$ 或 ^[1-9]\d*|0$
	
	//非正整数
	^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$

浮点数相关正则


	//浮点数
	^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
	
	//非负浮点数
	^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
	
	//非正浮点数
	^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
	
	//正浮点数
	^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
	
	//负浮点数
	^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

其他关于数值正则


	//正数正则
	var posPattern = /^\d*\.?\d+$/;
	
	//负数正则
	var negPattern = /^-\d*\.?\d+$/;
	
	//数字正则
	var numPattern = /^-?\d*\.?\d+$/;
	
	console.log(posPattern.test("42.2"));
	console.log(negPattern.test("-42.2"));
	console.log(numPattern.test("-42.2"));

日期正则


	//日期正则，简单判定,未做月份及日期的判定
	var dP1 = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
	
	//输出 true
	console.log(dP1.test("2017-05-11"));
	
	//输出 true
	console.log(dP1.test("2017-15-11"));
	
	//日期正则，复杂判定
	var dP2 = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
	
	//输出 true
	console.log(dP2.test("2017-02-11"));
	//输出 false
	console.log(dP2.test("2017-15-11"));
	//输出 false
	console.log(dP2.test("2017-02-29"));

账号密码自定义校验


	//帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
	^[a-zA-Z][a-zA-Z0-9_]{4,15}$
	
	// 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
	^[a-zA-Z]\w{5,17}$
	
	//强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)\
	^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

IP地址正则

	IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)
	
	IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))
	
	IP-v4地址：\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b (提取IP地址时有用)
	
	校验IP-v6地址:(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))
	
	子网掩码：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))

电子邮箱


	/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
	
	//Email正则
	var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	
	//输出 true
	console.log(ePattern.test("99154507@qq.com"));

URL正则


//URL正则
	var urlP= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
	
	//输出 true
	console.log(urlP.test("http://caibaojian.com"));

十六进制颜色正则


	//RGB Hex颜色正则
	var cPattern = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
	
	//输出 true
	console.log(cPattern.test("#b8b8b8"));

QQ号码


	/^[1-9][0-9]\d{4,9}$/

邮政编码


	/^[1-9]\d{5}$/

座机号码


	/^(0\d{2,3})-?(\d{7,8})$/

其他


	空白行的正则表达式：\n\s*\r (可以用来删除空白行)
	
	文件扩展名效验:^([a-zA-Z]\\:|\\\\)\\\\([^\\\\]+\\\\)*[^\\/:*?"<>|]+\\.txt(l)?$

	判断IE版本：^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\/[5-9]\\.0).*$

	域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?

	InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

结尾总结

俗话说：授人以鱼不如授人以渔，所以还是希望大家去学习正则的语法
我觉得w3cschool是一个不错的平台，希望同大家一起努力掌握新知识
附链接：https://www.w3cschool.cn/regexp/zoxa1pq7.html

参考资料：

正则表达：https://blog.csdn.net/itbrand/article/details/109239620

最新号码段：https://blog.csdn.net/NNXia555/article/details/121402290

简单身份证校验：https://blog.csdn.net/Embrace924/article/details/78247707

身份证校验：https://www.jianshu.com/p/209d99a8c980

正则合集：https://zhuanlan.zhihu.com/p/28058115

正则合集：https://zhuanlan.zhihu.com/p/30573054

正则合集：https://blog.csdn.net/ZYC88888/article/details/98479629

正则语法：https://www.w3cschool.cn/regexp/zoxa1pq7.html