Javascript第六章世上最全常用RegExp正则表达式及表单验证源码第七课

淡淡的烟草味﹌ 2022-02-19 02:25 150阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 1]

元字符：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 6]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 7]

很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。

一、校验数字的表达式

1.  数字：1\*$
2.  n位的数字：^\\d\{n\}$
3.  至少n位的数字：^\\d\{n,\}$
4.  m-n位的数字：^\\d\{m,n\}$
5.  零和非零开头的数字：^(0|\[1-9\]\[0-9\]\*)$
6.  非零开头的最多带两位小数的数字：^(\[1-9\]\[0-9\]\*)+(.\[0-9\]\{1,2\})?$
7.  带1-2位小数的正数或负数：^(-)?\\d+(.\\d\{1,2\})?$
8.  正数、负数、和小数：^(-|+)?\\d+(.\\d+)?$
9.  有两位小数的正实数：2\+(.\[0-9\]\{2\})?$
10. 有1~3位小数的正实数：3\+(.\[0-9\]\{1,3\})?$
11. 非零的正整数：4\\d\*$ 或 ^(\[1-9\]\[0-9\]*)\{1,3\}$ 或 ^+?\[1-9\]\[0-9\]*$
12. 非零的负整数：^-\[1-9\]\[\]0-9"*$ 或 ^-\[1-9\]\\d*$
13. 非负整数：^\\d+$ 或 5\\d\*|0$
14. 非正整数：^-\[1-9\]\\d\*|0$ 或 ^((-\\d+)|(0+))$
15. 非负浮点数：^\\d+(.\\d+)?$ 或 6\\d\*.\\d\*|0.\\d\*\[1-9\]\\d\*|0?.0+|0$
16. 非正浮点数：^((-\\d+(.\\d+)?)|(0+(.0+)?))$ 或 ^(-(\[1-9\]\\d\*.\\d\*|0.\\d\*\[1-9\]\\d\*))|0?.0+|0$
17. 正浮点数：7\\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\]*))$
18. 负浮点数：^-(\[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\]*)))$
19. 浮点数：^(-?\\d+)(.\\d+)?$ 或 ^-?(\[1-9\]\\d\*.\\d\*|0.\\d\*\[1-9\]\\d\*|0?.0+|0)$

二、校验字符的表达式

1.  汉字：8\{0,\}$
2.  英文和数字：9\+$ 或 10\{4,40\}$
3.  长度为3-20的所有字符：^.\{3,20\}$
4.  由26个英文字母组成的字符串：11\+$
5.  由26个大写英文字母组成的字符串：12\+$
6.  由26个小写英文字母组成的字符串：13\+$
7.  由数字和26个英文字母组成的字符串：14\+$
8.  由数字、26个英文字母或者下划线组成的字符串：^\\w+$ 或 ^\\w\{3,20\}$
9.  中文、英文、数字包括下划线：15\+$
10. 中文、英文、数字但不包括下划线等符号：16\+$ 或 17\{2,20\}$
11. 可以输入含有^%&’,;=?KaTeX parse error: Can't use function '\\"' in math mode at position 1: \\̲"̲等字符：\[^%&',;=?\\x22\]+ 12 禁止输入含有的字符：\[^\\x22\]+

三、特殊需求表达式

1.  Email地址：^\\w+(\[-+.\]\\w+)*@\\w+(\[-.\]\\w+)*.\\w+(\[-.\]\\w+)\*$
2.  域名：\[a-zA-Z0-9\]\[-a-zA-Z0-9\]\{0,62\}(/.\[a-zA-Z0-9\]\[-a-zA-Z0-9\]\{0,62\})+/.?
3.  InternetURL：\[a-zA-z\]+://\[^\\s\]\* 或 ^http://(\[\\w-\]+.)+\[\\w-\]+(/\[\\w-./?%&=\]\*)?$
4.  手机号码：^(13\[0-9\]|14\[5|7\]|15\[0|1|2|3|5|6|7|8|9\]|18\[0|1|2|3|5|6|7|8|9\])\\d\{8\}$
5.  电话号码(“XXX-XXXXXXX”、“XXXX-XXXXXXXX”、“XXX-XXXXXXX”、“XXX-XXXXXXXX”、"XXXXXXX"和"XXXXXXXX)：^((\\d\{3,4\}-)|\\d\{3.4\}-)?\\d\{7,8\}$
6.  国内电话号码(0511-4405222、021-87888822)：\\d\{3\}-\\d\{8\}|\\d\{4\}-\\d\{7\}
7.  身份证号(15位、18位数字)：^\\d\{15\}|\\d\{18\}$
8.  短身份证号码(数字、字母x结尾)：^(\[0-9\])\{7,18\}(x|X)?$ 或 ^\\d\{8,18\}|\[0-9x\]\{8,18\}|\[0-9X\]\{8,18\}?$
9.  帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：18\[a-zA-Z0-9\_\]\{4,15\}$
10. 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：19\\w\{5,17\}$
11. 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\\d)(?=.*\[a-z\])(?=.\*\[A-Z\]).\{8,10\}$
12. 日期格式：^\\d\{4\}-\\d\{1,2\}-\\d\{1,2\}
13. 一年的12个月(01～09和1～12)：^(0?\[1-9\]|1\[0-2\])$
14. 一个月的31天(01～09和1～31)：^((0?\[1-9\])|((1|2)\[0-9\])|30|31)$
15. 钱的输入格式：
16. 1.有四种钱的表示形式我们可以接受:“10000.00” 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”：20\[0-9\]\*$
17. 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|\[1-9\]\[0-9\]\*)$
18. 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?\[1-9\]\[0-9\]\*)$
19. 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：21\+(.\[0-9\]+)?$
20. 5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 “10” 和 “10.2” 是通过的：22\+(.\[0-9\]\{2\})?$
21. 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：23\+(.\[0-9\]\{1,2\})?$
22. 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：24\{1,3\}(,\[0-9\]\{3\})\*(.\[0-9\]\{1,2\})?$

23 8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^(\[0-9\]+|\[0-9\]\{1,3\}(,\[0-9\]\{3\})\*)(.\[0-9\]\{1,2\})?$

1.  备注：这就是最终结果了,别忘了"+“可以用”\*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
2.  xml文件：^(\[a-zA-Z\]±?)+\[a-zA-Z0-9\]+\\.\[x|X\]\[m|M\]\[l|L\]$
3.  中文字符的正则表达式：\[\\u4e00-\\u9fa5\]
4.  双字节字符：\[^\\x00-\\xff\] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
5.  空白行的正则表达式：\\n\\s\*\\r (可以用来删除空白行)
6.  HTML标记的正则表达式：<(\\S\*?)\[^>\]*>.*?</\\1>|<.\*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
7.  首尾空白字符的正则表达式：^\\s\*|\\s\*KaTeX parse error: Expected group after '^' at position 3: 或(^̲\\s\*)|(\\s\*) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
8.  腾讯QQ号：\[1-9\]\[0-9\]\{4,\} (腾讯QQ号从10000开始)
9.  中国邮政编码：\[1-9\]\\d\{5\}(?!\\d) (中国邮政编码为6位数字)
10. IP地址：\\d+.\\d+.\\d+.\\d+ (提取IP地址时有用)
11. IP地址：((???:25\[0-5\]|2\[0-4\]\\d|\[01\]?\\d?\\d)\\.)\{3\}(?:25\[0-5\]|2\[0-4\]\\d|\[01\]?\\d?\\d))

源码表单验证：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.error{ 
    			font-size: 12px;
    			color: red;
    		}
    		.ok{ 
    			font-size: 12px;
    			color: green;
    		}
    	</style>
    	<script type="text/javascript">
    		function checkInput(){ 
    			return checkUsername()&&checkPassword()&&checkRepassword();
    		}
    
    		//用户名由数字、字母、下划线、点、横线、中文字符、空格组成，只能以数字或字母开头和结尾，且长度在3-14之间
    		function checkUsername(){ 
    			var regUsername=/^[\da-z][\u4E00-\u9FA5\w. -]{1,12}[\da-z]$/i;
    			var username=$("username").value.trim();
    			if(!regUsername.test(username)){ 
    				// alert("用户名由数字、字母、下划线、点、横线、中文字符组成！");
    				$("usernameInfo").innerHTML="用户名由数字、字母、下划线、点、横线、中文字符组成！";
    				$("usernameInfo").className="error";
    				//$("username").focus(); //光标停在出错的地方
    				$("username").select();  //光标选中出错的地方
    				return false;
    			}
    			$("usernameInfo").innerHTML="OK";
    			$("usernameInfo").className="ok";
    			$("username").value=username;
    			return true;
    		}
    
    		//密码只能由数字和字母组成，长度为6-10位
    		function checkPassword(){ 
    			var regPassword=/^[\da-z]{6,10}$/i;
    			if(!regPassword.test($("password").value)){ 
    				$("passwordInfo").innerHTML="密码只能由数字和字母组成，长度为6-10位！";
    				$("passwordInfo").className="error";
    				return false;
    			}
    			$("passwordInfo").innerHTML="OK";
    			$("passwordInfo").className="ok";
    			return true;
    		}
    
    		//两次输入的密码必须相同
    		function checkRepassword(){ 
    			if($("repassword").value!=$("password").value){ 
    				$("repasswordInfo").innerHTML="两次输入的密码不一致！";
    				$("repasswordInfo").className="error";
    				return false;
    			}
    			$("repasswordInfo").innerHTML="OK";
    			$("repasswordInfo").className="ok";
    			return true;
    		}
    
    		//出生日期，年份在1900-今年之间，格式为yyyy-mm-dd
    
    		//手机号码，11位，以1开头
    
    		//年龄为1-120
    
    		//身份证，15或18位，18位身份证最后一位可以为x，如32138119900213383X
    
    
    
    		var $=function(id){ 
    			return document.getElementById(id);
    		};
    
    		//对于IE浏览器需要自行为String添加trim方法
    		String.prototype.trim=function(){ 
    			var reg=/^\s+|\s+$/g;
    			return this.replace(reg,"");
    		};
    	</script>
    </head>
    <body>
    	<h1>用户注册</h1>
    	<form action="success.html" onsubmit="return checkInput()">
    		<table>
    			<tr>
    				<td>用户名：</td>
    				<td>
    					<input type="text" id="username" placeholder="请输入用户名" onblur="checkUsername()">
    					<span id="usernameInfo"></span>
    				</td>
    			</tr>
    			<tr>
    				<td>密码：</td>
    				<td>
    					<input type="text" name="" id="password" onblur="checkPassword()">
    					<span id="passwordInfo"></span>
    				</td>
    			</tr>
    			<tr>
    				<td>确认密码：</td>
    				<td>
    					<input type="text" name="" id="repassword" onblur="checkRepassword()">
    					<span id="repasswordInfo"></span>
    				</td>
    			</tr>
    			<tr>
    				<td>出生日期：</td>
    				<td><input type="text" name="" id="birthday"></td>
    			</tr>
    			<tr>
    				<td>手机号码：</td>
    				<td><input type="text" name="" id=""></td>
    			</tr>
    			<tr>
    				<td>年龄：</td>
    				<td><input type="text" name="" id=""></td>
    			</tr>
    			<tr>
    				<td>身份证：</td>
    				<td><input type="text" name="" id=""></td>
    			</tr>
    			<tr>
    				<td>固定电话：</td>
    				<td><input type="text" name="" id=""></td>
    			</tr>
    			<tr>
    				<td>电子邮箱：</td>
    				<td><input type="text" name="" id=""></td>
    			</tr>
    			<tr>
    				<td colspan="2">
    					<input type="submit" value="注 册">
    					<input type="reset" value="重 置">
    				</td>
    			</tr>
    		</table>
    
    	</form>
    </body>
    </html>

--------------------

1.  0-9 ↩︎
2.  0-9 ↩︎
3.  0-9 ↩︎
4.  1-9 ↩︎
5.  1-9 ↩︎
6.  1-9 ↩︎
7.  1-9 ↩︎
8.  \\u4e00-\\u9fa5 ↩︎
9.  A-Za-z0-9 ↩︎
10. A-Za-z0-9 ↩︎
11. A-Za-z ↩︎
12. A-Z ↩︎
13. a-z ↩︎
14. A-Za-z0-9 ↩︎
15. \\u4E00-\\u9FA5A-Za-z0-9\_ ↩︎
16. \\u4E00-\\u9FA5A-Za-z0-9 ↩︎
17. \\u4E00-\\u9FA5A-Za-z0-9 ↩︎
18. a-zA-Z ↩︎
19. a-zA-Z ↩︎
20. 1-9 ↩︎
21. 0-9 ↩︎
22. 0-9 ↩︎
23. 0-9 ↩︎
24. 0-9 ↩︎

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70]: /images/20220219/8ddc3dfff920446ca6a1009074d0cddf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 1]: /images/20220219/82a95fcb5a90429f8061b70064201c49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 2]: /images/20220219/bec70f00c3d84e89b638d539bcb3c730.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 3]: /images/20220219/ded3c2dfafca4c6fbb2e8127aba3e6a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 4]: /images/20220219/f43184f03ce74f3aa8ea59b71b202d03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 5]: /images/20220219/77578310183c4ba7b96d336bca0372ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 6]: /images/20220219/7c5264b76dcd4cefa1a7feeb0adb4d93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 7]: /images/20220219/54ef5cf3fbc94aef8903b09224a3559f.png