正则表达式 - 表单验证

April 19, 2017

一步一步

今天终于开始写表单了，进度有点慢，时间不是很充裕，每天只有晚上这点时间可以折腾。而且这么久没写项目了感觉脑袋有点跟不上了.. 项目进度等这个添加用户的功能做好之后再来一次汇整总结把！

因为要写表单了，所以需要考虑上数据的验证问题。自己查阅了 framework7 的官方文档和百度、知乎这些资料平台后发现似乎并没验证表单的组件。无奈之下本来打算选择 jquery，然后使用 jquery 的一些组件。后来不知道怎么的忽然想起了微信的 weui.js，里面不仅有我需要的表单验证功能还有之后会用到的上传组件。所以我就直接拿过来用了，没想到和 framework7 契合度似乎还挺高的～～～

使用 weui.js

我们网页内引用 weui.js 后就可以通过 weui.form.validate() 这种方式来访问了，其他的函数也都是同理，具体函数列表参见 weui.js

<!--  head处引入css(css必须引入，可以使用cdn。因为weui.js里面生成的页面元素会用到) -->
<link href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css" rel="stylesheet">
<!-- 底部处引入js文件(weui.js没有cdn，需要自己下载到项目中) -->
<script type="text/javascript" src="js/weui.min.js"></script>

我根据我的理解写的一个 DEMO

<form id="myform">
	<input name="id" />
	<!--  可以直接设置pattern属性，或者使用参数传入格式为：REG_定义的标识名字，这里电话的验证就是通过REG_TEL定义  -->
	<input type="text" name="ppaccount" placeholder="请输入帐号" notmatchtips="请输入4位以上的帐号" pattern="^\d{4}" required>
	<input type="tel" placeholder="输入你现在的手机号" emptyTips="请输入手机号" notMatchTips="请输入正确的手机号" pattern="REG_TEL">
	<input type="button" id="btn" value="验证" >

</form>

<script type="text/javascript">
	//点击按钮时验证
	$$(document).on('click', '#btn', function() {
		weui.form.validate('#myform', function(error) {
			if(!error) {
				var loading = weui.loading('提交中...');
				setTimeout(function() {
					loading.hide();
					weui.toast('提交成功', 3000);
				}, 1500);
			}
			// return true; // 当return true时，不会显示错误
		}, {
			//定义正则表达式
			regexp: {
				TEL: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/
			}
		});
	})
	//输入元素失去焦点时验证，但是我这里没有生效
	weui.form.checkIfBlur('#myform', {
		regexp: {
			IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/,
			VCODE: /^.{4}$/
		}
	});
</script>

一些关于正则表达式的资料

在网上搜集了一些相关的资料 [^]

固定格式验证是指对输入的内容是否符合格式要求的验证，写法为 if (v.match ())，natch 里面放正则表达式，如果匹配成功，return 的是输入的内容，如果匹配失败，return 的是 null。正则表达式是对输入的内容的格式的要求，比如邮箱地址、电话号码、身份证号码等。常用的正则表达式符号有：

//：正则表达式的书写规则，// 中间写正则表达式的内容，/ 内容 /；

^：匹配开头，/^ve 表示以 ve 开头；

$：匹配结尾，ve$/ 表示以 ve 结束；

\d：一个任意的数字，等于 0-9；

\m：一个任意的数字或者字母，包括下划线；

\s：任意的不可见的字符串，例如空格、换行；

\S：任意的可见的字符；

{n}：前面的表达式重复 n 变，n 等于几就是几遍；

{m，n}：把前面的表达式重复至少 m 遍，最多 n 遍；
{m，}：把前面的表达式重复至少 m 遍，最多不限；

+：左边的表达式，至少出现 1 次，至多不限，相当于 {1,};

*：左边的表达式，至少出现 0 次，至多不限，相当于 {0,};

？：左边的表达式，至少出现 0 次，最多出现 1 次，相当于 {0,1}；

[a,b,c]：只能取方括号中内容之一；

[a-z] 或 [1-9]：在 a-z 或者 0-9 取值；

\r：表示换行；

\n：表示换行；

\t：表示 Tab 键；

\：表示 \；

"："

x|y：可以匹配 x 或者 y；

[^xyz]：不匹配 [] 里面的内容；

常用的正则表达式：

• Email 地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
• 域名：[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-./?%&=]*)?$
• 手机号码：^(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}$
• 电话号码 (“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX” 和”XXXXXXXX)：^($\d{3,4}-)|\d{3.4}-)?\d{7,8}$
• 国内电话号码 (0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
• 身份证号 (18 位数字)：/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
• 身份证号 (15 位数字)：/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
• 短身份证号码 (数字、字母 x 结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
• 帐号是否合法 (字母开头，允许 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}$
• 日期格式：^\d{4}-\d{1,2}-\d{1,2}
• 一年的 12 个月 (01～09 和 1～12)：^(0?[1-9]|1[0-2])$
• 一个月的 31 天 (01～09 和 1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
• 钱的输入格式：有四种钱的表示形式我们可以接受:”10000.00″ 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”：^[1-9][0-9]*$
• xml 文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
• 中文字符的正则表达式：[\u4e00-\u9fa5]
• 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度 (一个双字节字符长度计 2，ASCII 字符计 1))
• 空白行的正则表达式：\n\s*\r (可以用来删除空白行)
• HTML 标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
• 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符 (包括空格、制表符、换页符等等)，非常有用的表达式)
• 腾讯 QQ 号：[1-9][0-9]{4,} (腾讯 QQ 号从 10000 开始)
• 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为 6 位数字)
• 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?