正则表达式-表单验证

一步一步

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

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

我叫1900,普通男青年,学过三年编程。湖南人,现在在四川工作。2015年花了26天骑过一次318。有点伪文艺,喜欢比较玄学的东西。性格多变,疑似有人格分裂。

继续阅读此作者的更多文章