正则表达式-表单验证

一步一步

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

因为要写表单了，所以需要考虑上数据的验证问题。自己查阅了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?