正则表达式-表单验证
标签:设计

一步一步

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

因为要写表单了,所以需要考虑上数据的验证问题。自己查阅了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]:不匹配[]里面的内容;

常用的正则表达式:

  • 7 min read
  • 等待开放

CONTRIBUTORS


  • 7 min read
  • 等待开放