JavaScript正则验证笔记

当我们在写前端登录验证的时候，会用到一些常用的正则匹配，那么对于一些要求不高的需求就可以用一些通用的正则来验证，减少了我们在开发上浪费的时间。

##语法规则

1)、元字符

2)、量词

1.用户名正则

//用户名正则，4到16位（字母，数字，下划线，减号）
var user= /^[a-zA-Z0-9_-]{4,16}$/;
console.log(user.test("Aa1-"));
//控制台打印结果：true

2.密码强度正则

//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
var pwd= /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
console.log(pwd.test("Aa1#.$"));
//控制台打印结果：true

3.整数正则

//整数正则
var num3 = /^-?\d+$/;
console.log(num3.test("520"));
//控制台打印结果：true

//正整数正则
var num1 = /^\d+$/;
console.log(num1.test("520"));
//控制台打印结果：true

//负整数正则
var num2 = /^-\d+$/;
console.log(num2.test("-520"));
//控制台打印结果：true

4.数字正则

//可以是整数也可以是浮点数

//正数正则
var num1= /^\d*\.?\d+$/;
console.log(num1.test("520.0"));
//控制台打印结果：true

//负数正则
var num2= /^-\d*\.?\d+$/;
console.log(num2.test("-520"));
//控制台打印结果：true

//数字正则
var num3= /^-?\d*\.?\d+$/;
console.log(num3.test("-5.20"));
//控制台打印结果：true

5.邮箱(Email)正则

//Email正则
var email= /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
console.log(email.test('153128151@qq.com'));
//控制台打印结果：true

6.手机号码正则

//手机号正则
var phone= /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
console.log(phone.test("17638100000"));
//控制台打印结果：true

7.身份证号正则

//身份证号（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]$/;
console.log(cP.test("11010519880605371X"));
//控制台打印结果：true

8.URL正则

//URL正则
var str=/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
console.log(str.test('https://a14.cn/code?a=1&b=2&c=3'));
//控制台打印结果：true

9.IPv4地址正则

//ipv4地址正则
var ip = /^(?:(?: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]?)$/;
console.log(ip.test("115.28.47.26"));
//控制台打印结果：true

10.十六进制颜色正则

//RGB Hex颜色正则
var RGB= /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
console.log(RGB.test("#b8b8b8"));
//控制台打印结果：true

11.日期正则

//日期正则，简单判定,未做月份及日期的判定
var dP1 = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
console.log(dP1.test("2017-05-11"));
//控制台打印结果：true
console.log(dP1.test("2017-15-11"));
//控制台打印结果：true

//日期正则，复杂判定
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)$/;
console.log(dP2.test("2017-02-11"));
//控制台打印结果：true
console.log(dP2.test("2017-15-11"));
//控制台打印结果：false
console.log(dP2.test("2017-02-29"));
//控制台打印结果：false

12.QQ号码正则

//QQ号正则，5至11位
var qq= /^[1-9][0-9]{4,10}$/;
console.log(qq.test("153128151"));
//控制台打印结果：true

13.微信号正则

//微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
var wx= /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
console.log(wx.test("RuilongMao"));
//控制台打印结果：true

14.车牌号正则

//车牌号正则
var c= /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
console.log(c.test("京K39006"));
//控制台打印结果：true

15.包含中文正则

//包含中文正则
var cn= /[\u4E00-\u9FA5]/;
console.log(cn.test("你好"));
//控制台打印结果：true

##用户，邮箱，手机三者同时判断

首先普通的正则方法是无法同时匹配三者的，那么要想实现同时判断就要需要一些辅助

实现思路：多重if嵌套用户名输入的值的长度和手机号输入的值的长度是突破点，如果用户输入的值的长度大于用户正则的长度那么可以判断用户要输入手机号，那么进行手机号正则验证，反则不大于继续用户正则验证。如果用户输入的值的长度大于用户正则的长度又输入了“@”或“.”关键字符那么可以判定用户要输入邮箱，进行邮箱正则验证。

//多类型登录正则检查
$(function() {
        //当元素失去焦点时发生 blur 事件。也就是光标离开触发
	$("#user").blur(function() {
                //获取输入的值
		var user=$("#user").val();
                //判断值的长度
		if(user.length>6){
                        //判断是否存在邮箱特征
			if(user.indexOf("@")!=-1||user.indexOf(".")!=-1){
				var checkEmail = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if(checkEmail.test(user)) {
					$("#user").attr("class", "okTxt");
					$("#msguser").html("");
				} else {
					$("#user").attr("class", "errTxt");
					$("#msguser").html("邮箱格式错误");
				}
			}else{
				var checkPhone = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
				if(checkPhone.test(user)) {
					$("#user").attr("class", "okTxt");
					$("#msguser").html("");
				} else {
					$("#user").attr("class", "errTxt");
					$("#msguser").html("手机号格式错误");
				}
			}
		}else{
			var checkUser = /^[a-zA-Z0-9_-]{4,6}$/;
			if(checkUser.test(user)) {
				$("#user").attr("class", "okTxt");
				$("#msguser").html("");
			} else {
				$("#user").attr("class", "errTxt");
				$("#msguser").html("用户名格式错误 必须4到6位（字母，数字，下划线，减号）");
			}
		}
	});
});