JavaScript正则验证笔记 - 寒江孤影

JavaScript正则验证笔记

作者: 寒江孤影

全网最全的网络资源分享网站

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

广告位

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

正则表达式手册

正则表达式语法学习

##语法规则

1)、元字符

QQ截图20201205054700.png

2)、量词

QQ截图202012054054700.png

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位(字母,数字,下划线,减号)");
			}
		}
	});
});
分享到:
打赏
-版权声明-

作者: 寒江孤影, 转载或复制请以 超链接形式 并注明出处 寒江孤影
原文地址: 《JavaScript正则验证笔记》 发布于2020-12-4

阅读时间:   发布于:2020-12-4
文章标题:《JavaScript正则验证笔记》
本文链接:https://a14.cn:443/post-37.html
本文编辑: 寒江孤影,转载请注明超链接和出处寒江孤影
收录状态:[百度已收录][360未收录][搜狗已收录]

评论一下

未显示?请点击刷新
切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

JavaScript正则验证笔记

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

花呗扫一扫打赏

微信扫一扫打赏

企鹅扫一扫打赏

召唤伊斯特瓦尔