Validate.js
工作方式:
读取输入框的属性,校验输入框的值如:
<input class=”weui-input” type=”tel” name=”idcard” id=”inputIdcard” maxlength=”18″
pattern=”^\d{15}|^\d{17}[0-9Xx]$” data-pattern-msg=”请输入正确的身份证号”
data-inputing-pattern=”^\d{0,15}$|^\d{0,17}[0-9Xx]$” data-inputing-msg=”请输入正确的身份证“
required=”required” data-required-msg=”请输入身份证号“
>
ps.对于required和pattern,html5默认实现了一套规则,需要在表单上禁用:
<form id=”calcForm” novalidate></form>
处理规则:
pattern:提交表单时的正则验证
data-pattern-msg:不匹配规则时的提示信息
data-inputing-pattern:正在输入的input校验规则
data-inputing-msg:不匹配正在输入的规则时提示信息
required:必填项验证
data-required-msg:必填项为空时的提示信息
常用正则:
Pattern:
- 信用卡 [0-9]{13,16}
- 银联卡 ^62[0-5]\d{13,16}$
- Visa: ^4[0-9]{12}(?:[0-9]{3})?$
- 万事达:^5[1-5][0-9]{14}$
- QQ号码: [1-9][0-9]{4,14}
-
手机号码:
^(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}$
^1\d{10}$
-
身份证:
^([0-9]){7,18}(x|X)?$
^\d{15}|\d{17}[0-9Xx]$
- 密码:^[a-zA-Z]\w{5,17}$ 字母开头,长度在6~18之间,只能包含字母、数字和下划线
- 强密码:^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间
-
7个汉字
^[\u4e00-\u9fa5]{1,7}$
-
14个字符:
^[\dA-Za-z_]{1,14}$
InputingPattern:
身份证号:
^\d{0,15}$|^\d{0,17}[0-9Xx]$
手机号码:
^1\d{0,10}$
密码:
接口方法:
Validate.form(id),调用Validate.input()校验表单内所有input规则,不校验disabled的input元素
Validate.input(id),校验指定的input对象规则
Validate.inputing(id),校验正在输入的input对象
默认的事件绑定实现:
Validate-init.js
$(function() {
Validate.showmsg = function(msg) {
weui.topTips(msg, 3000);
};
Validate.hidemsg = function(msg) {
$(“.weui-toptips”).hide();
};
//校验正在输入的表单项
$(“form input”).on(“keyup”, function() {
Validate.inputing($(this));
});
//提交表单form表单,需要手动在表单提交事件里调用Validate.form(formid)方法
//$(“#submitform“).on(“click”, function() {
//Validate.form($(this));
//});
});