JS常用正则

JS常用正则

在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的javaScript正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址(Email)、手机号码、身份证号、URL地址、 IPv4地址、 十六进制颜色、 日期、 QQ号码、 微信号、车牌号、中文正则。

1 用户名正则

//用户名正则,4到16位(字母,数字,下划线,减号)
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//输出 true
console.log(uPattern.test("caibaojian"));

2 密码强度正则

//密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符
var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//输出 true
console.log("=="+pPattern.test("caibaojian#"));

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"));

4 数字正则

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

//正数正则
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"));

5 Email正则

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

6 手机号码正则

//手机号正则
var myreg=/^1[3456789]\d{9}$/;
//或    /^1(3|4|5|6|7|8|9)\d{9}$/
//输出 true
console.log(myreg.test("15507621888"));
  • 以1为开头
  • 第二位可为3,4,5,6,7,8,9中的任意一位
  • 最后以0-9的9个整数结尾。

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]$/;
//输出 true
console.log(cP.test("11010519880605371X"));

8 URL正则

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

9 IPv4地址正则

//ipv4地址正则
var ipP = /^(?:(?: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]?)$/;
//输出 true
console.log(ipP.test("115.28.47.26"));

10 十六进制颜色正则

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

11 日期正则

//日期正则,简单判定,未做月份及日期的判定
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"));

12 QQ号码正则

//QQ号正则,5至11位
var qqPattern = /^[1-9][0-9]{4,10}$/;
//输出 true
console.log(qqPattern.test("65974040"));

13 微信号正则

//微信号正则,6至20位,以字母开头,字母,数字,减号,下划线
var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
//输出 true
console.log(wxPattern.test("caibaojian_com"));

14 车牌号正则

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

15 包含中文正则

//包含中文正则
var cnPattern = /[\u4E00-\u9FA5]/;
//输出 true
console.log(cnPattern.test("蔡宝坚"));

16 日期字符串格式转化

  • 20190105日期字符串转成XXXX-XX-XX
'20190105'.replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3")
//2019-01-05

其他

整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$
只能输入数字:"^[0-9]*$"。
只能输入n位的数字:"^\d{n}$"。
只能输入至少n位的数字:"^\d{n,}$"。
只能输入m~n位的数字:。"^\d{m,n}$"
只能输入零和非零开头的数字:"^(0|[1-9][0-9]*)$"。
只能输入有两位小数的正实数:"^[0-9]+(.[0-9]{2})?$"。
只能输入有1~3位小数的正实数:"^[0-9]+(.[0-9]{1,3})?$"。
只能输入非零的正整数:"^\+?[1-9][0-9]*$"。
只能输入非零的负整数:"^\-[1-9][]0-9"*$。
只能输入长度为3的字符:"^.{3}$"。
只能输入由26个英文字母组成的字符串:"^[A-Za-z]+$"。
只能输入由26个大写英文字母组成的字符串:"^[A-Z]+$"。
只能输入由26个小写英文字母组成的字符串:"^[a-z]+$"。
只能输入由数字和26个英文字母组成的字符串:"^[A-Za-z0-9]+$"。
只能输入由数字、26个英文字母或者下划线组成的字符串:"^\w+$"。
验证用户密码:"^[a-zA-Z]\w{5,17}$"正确格式为:以字母开头,长度在6~18之间,只能包含字符、数字和下划线。
验证是否含有^%&'',;=?$\"等字符:"[^%&'',;=?$\x22]+"。
只能输入汉字:"^[\u4e00-\u9fa5]{0,}$"
验证Email地址:"^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"。
验证InternetURL:"^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"。
验证电话号码:"^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$"正确格式为:"XXX-XXXXXXX"、"XXXX- XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX"。
验证身份证号(15位或18位数字):"^\d{15}|\d{18}$"。
验证一年的12个月:"^(0?[1-9]|1[0-2])$"正确格式为:"01"~"09"和"1"~"12"。
验证一个月的31天:"^((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为;"01"~"09"和"1"~"31"。整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$
只能输入数字:"^[0-9]*$"。
只能输入n位的数字:"^\d{n}$"。
只能输入至少n位的数字:"^\d{n,}$"。
只能输入m~n位的数字:。"^\d{m,n}$"
只能输入零和非零开头的数字:"^(0|[1-9][0-9]*)$"。
只能输入有两位小数的正实数:"^[0-9]+(.[0-9]{2})?$"。
只能输入有1~3位小数的正实数:"^[0-9]+(.[0-9]{1,3})?$"。
只能输入非零的正整数:"^\+?[1-9][0-9]*$"。
只能输入非零的负整数:"^\-[1-9][]0-9"*$。
只能输入长度为3的字符:"^.{3}$"。
只能输入由26个英文字母组成的字符串:"^[A-Za-z]+$"。
只能输入由26个大写英文字母组成的字符串:"^[A-Z]+$"。
只能输入由26个小写英文字母组成的字符串:"^[a-z]+$"。
只能输入由数字和26个英文字母组成的字符串:"^[A-Za-z0-9]+$"。
只能输入由数字、26个英文字母或者下划线组成的字符串:"^\w+$"。
验证用户密码:"^[a-zA-Z]\w{5,17}$"正确格式为:以字母开头,长度在6~18之间,只能包含字符、数字和下划线。
验证是否含有^%&'',;=?$\"等字符:"[^%&'',;=?$\x22]+"。
只能输入汉字:"^[\u4e00-\u9fa5]{0,}$"
验证Email地址:"^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"。
验证InternetURL:"^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"。
验证电话号码:"^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$"正确格式为:"XXX-XXXXXXX"、"XXXX- XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX"。
验证身份证号(15位或18位数字):"^\d{15}|\d{18}$"。
验证一年的12个月:"^(0?[1-9]|1[0-2])$"正确格式为:"01"~"09"和"1"~"12"。
验证一个月的31天:"^((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为;"01"~"09"和"1"~"31"。

案例

验证手机号

var myreg=/^1[3456789]\d{9}$/;
//或    /^1(3|4|5|6|7|8|9)\d{9}$/
//输出 true
console.log(myreg.test("15507621888"));
function isPoneAvailable(str) {    
    var myreg=/^1[34578][0-9]{9}$/;    
    if (!myreg.test(str)) {        
        return false;    
    } 	
    else{        
        return true;    
    }
}
console.log(isPoneAvailable('15112345678'));//=>true
console.log(isPoneAvailable('12112345678'));//=>false

验证URL

//个url的正则表达式判断的JavaScript!比较全面的。它验证的情况包括IP,域名(domain),ftp,二级域名,域名中的文件,域名加上端口!用户名等等信息,

function IsURL(str_url) {
    var strRegex =
        "^((https|http|ftp|rtsp|mms)?://)" +
        "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@
        "(([0-9]{1,3}.){3}[0-9]{1,3}" + // IP形式的URL- 199.194.52.184
        "|" + // 允许IP和DOMAIN(域名)
        "([0-9a-z_!~*'()-]+.)*" + // 域名- www.
        "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." + // 二级域名
        "[a-z]{2,6})" + // first level domain- .com or .museum
        "(:[0-9]{1,4})?" + // 端口- :80
        "((/?)|" + // a slash isn't required if there is no file name
        "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
    var re = new RegExp(strRegex);
    //re.test()
    if (re.test(str_url)) {
        return true;
    } else {
        return false;
    }
}

// 2:简单点的
function CheckUrl(str) {
    var RegUrl = new RegExp();
    RegUrl.compile("^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$"); //https://www.cnblogs.com/bignote/
    if (!RegUrl.test(str)) {
        return false;
    }
    return true;
}

// 3.简单点的
function checkUrl(urlString) {
    if (urlString != "") {
        var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
        if (!reg.test(urlString)) {
            alert("不是正确的网址吧,请注意检查一下");
        }
    }
}

完整JQuery表单验证

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.msg{color:red;}
		.error{display: none;}
	</style>
</head>
<body>
	<h1>表单注册</h1>
	<form action="http://www.jd.com" method="post">
		<div class="row">
			<label for="uname">名字:</label>
			<input type="text" name="uname" id="uname" autocomplete="off" class="required" />
			<span class="msg"></span>
		</div>
		<div class="row">
			<label for="pwd">密码:</label>
			<input type="text" name="pwd" id="pwd" class="required" />
			<span class="msg"></span>
		</div>
		<div class="row">
			<label for="pwd2">确认密码:</label>
			<input type="password" name="pwd2" id="pwd2" class="required" />
			<span class="msg"></span>
		</div>
		<div class="row">
			<label for="email">邮箱:</label>
			<input type="text" name="email" id="email" class="required" />
			<span class="msg"></span>
		</div>
		<div class="row">
			<label for="addr">地址:</label>
			<input type="text" name="addr" id="addr" />
			<span class="msg"></span>
		</div>
		
		<input type="submit" value="提交"/>
	</form>
	<h1 class="error" >请完善完资料再提交</h1>
	
	<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//1. 页面加载后,验证必填项  each用于循环每个元素!
			$('form input.required').each(function(){
				console.log($(this))
				var txt = $(this).val()
				if(txt =='' || txt.length ==0){
					$(this).next("span").html('*')
				}
			})
			
			//2. 必填项如果有空,禁止提交的!
			$("form").submit(function(){
				var isGo = true; //是否跳转标记
				$("input.required").each(function(){
					var txt  = $(this).val().trim();// 去空格!
					if(txt=='' || txt.length==0){
						isGo = false;
					}
				})
				if (isGo==false){
					$('.error').slideDown(3000); //下拉
				}
				return isGo;
			})
			//3. 失去焦点或改变事件或键盘抬起事件
			$('form :input').blur(function(){
				$(this).next('span').html("") //去掉*号
				
				//用户名
				if($(this).is('#uname')){
					var uname = $(this).val().trim();//去掉左右空格
					console.log(uname);
					//做ajax
					if(uname.length==0){
						$(this).next('span').html('名字不能为空!')
					}else{
						$(this).next('span').html('正确!')
					}
				}
				//密码..确认密码...手机..邮箱.地址...
				if($(this).is('#pwd')){
					var pwd = $(this).val().trim();
					console.log(pwd)
					//密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符
					var regPwd = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
				
					if(pwd.length<6 || regPwd.test(pwd)==false){
						$(this).next('span').html('最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符')
					}else{
						$(this).next('span').html('正确')
					}
				}
				//确认密码
				if($(this).is('#pwd2')){
					var pwd2= $(this).val().trim();
					var pwd1=$("#pwd").val().trim()
					if(pwd1!=pwd2){
						$(this).next('span').html('两次密码不相同')
					}else{
						$(this).next('span').html('正确')
					}
				}
				
				//邮箱
				if($(this).is('#email')){
					var email = $(this).val().trim()
					var regemail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
					if(regemail.test(email)==false){
						$(this).next('span').html('邮箱格式不正确')
					}else{
						$(this).next('span').html('正确')
					}
				}
			}).keyup(function(){
				//直接调用blur事件
				$(this).triggerHandler('blur');
			})
			
			
			
		})
	</script>
</body>
</html>
posted @ 2020-07-15 20:36  一归AI  阅读(272)  评论(0编辑  收藏  举报