自定义的前端校验组件Validate.js

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));

//});

});



打赏

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.