首页 > 代码库 > jquery validate.addMethod 正则表达式 (自定义验证方法)
jquery validate.addMethod 正则表达式 (自定义验证方法)
项目中使用的jQuery添加的校验的方法
$(document).ready(function(){
5
6
/* 设置默认属性 */
7$.validator.setDefaults({
8 submitHandler: function(form) {
9 form.submit();
10
}
11});
12
13// 字符验证
14jQuery.validator.addMethod("stringCheck", function(value, element) {
15 return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
16}, "只能包括中文字、英文字母、数字和下划线");
17
18// 中文字两个字节
19jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
20 var length = value.length;
21 for(var i = 0; i < value.length; i++){
22 if(value.charCodeAt(i) > 127){
23 length++;
24 }
25 }
26 return this.optional(element) || ( length >= param[0] && length <= param[1] );
27}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
28
29// 身份证号码验证
30jQuery.validator.addMethod("isIdCardNo", function(value, element) {
31 return this.optional(element) || isIdCardNo(value);
32}, "请正确输入您的身份证号码");
33
34// 手机号码验证
35jQuery.validator.addMethod("isMobile", function(value, element) {
36 var length = value.length;
37 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
38 return this.optional(element) || (length == 11 && mobile.test(value));
39}, "请正确填写您的手机号码");
40
41// 电话号码验证
42jQuery.validator.addMethod("isTel", function(value, element) {
43 var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678
44 return this.optional(element) || (tel.test(value));
45}, "请正确填写您的电话号码");
46
47// 联系电话(手机/电话皆可)验证
48jQuery.validator.addMethod("isPhone", function(value,element) {
49 var length = value.length;
50 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
51 var tel = /^\d{3,4}-?\d{7,9}$/;
52 return this.optional(element) || (tel.test(value) || mobile.test(value));
53
54}, "请正确填写您的联系电话");
55
56// 邮政编码验证
57jQuery.validator.addMethod("isZipCode", function(value, element) {
58 var tel = /^[0-9]{6}$/;
59 return this.optional(element) || (tel.test(value));
60}, "请正确填写您的邮政编码");
61
62//开始验证
63$(‘#submitForm‘).validate({
64 /* 设置验证规则 */
65 rules: {
66 username: {
67 required:true,
68 stringCheck:true,
69 byteRangeLength:[3,15]
70 },
71 email:{
72 required:true,
73 email:true
74 },
75 phone:{
76 required:true,
77 isPhone:true
78 },
79 address:{
80 required:true,
81 stringCheck:true,
82 byteRangeLength:[3,100]
83 }
84 },
85
86 /* 设置错误信息 */
87 messages: {
88 username: {
89 required: "请填写用户名",
90 stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
91 byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
92 },
93 email:{
94 required: "请输入一个Email地址",
95 email: "请输入一个有效的Email地址"
96 },
97 phone:{
98 required: "请输入您的联系电话",
99 isPhone: "请输入一个有效的联系电话"
100 },
101 address:{
102 required: "请输入您的联系地址",
103 stringCheck: "请正确输入您的联系地址",
104 byteRangeLength: "请详实您的联系地址以便于我们联系您"
105 }
106 },
107
108 /* 设置验证触发事件 */
109 focusInvalid: false,
110 onkeyup: false,
111
112 /* 设置错误信息提示DOM */
113 errorPlacement: function(error, element) {
114 error.appendTo( element.parent());
115 },
116
117});
118
119
});
supplier-commons-vacation.js
//定义订单的公共的函数方法
function define_common_method(){
//设置默认的操作
$.validator.setDefaults({
submitHandler: function(form) { form.submit(); }
});
//添加自定义校验函数
$.validator.addMethod("charNo",function(value,element) {
var length = value.length;
var your_tel =/[\W]/g;
return this.optional(element) || (length<=8&&!your_tel.test(value));
},"请输入英文字符或数字！");
//添加验证操作名称的校验函数
$.validator.addMethod("charString",function(value,element) {
var length = value.length;
var your_tel =/[^\a-zA-Z\u4E00-\u9FA5]/g;
var your_tel2=/^[A-Za-z]*$/;
return this.optional(element) || (length<=20&&!your_tel.test(value));
},"请输入中文或英文名称");
//验证手机号码（仅仅13和15开头）
$.validator.addMethod("isPhone", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话或者手机");
}
supplier-finance.js
jQuery(function($) {
//绑定所有的事件
$(document).ready(function() {
bind_component_event();
});
//绑定的公共的事件
function bind_component_event() {
//定义一些公共的方法
define_common_method();
//环游供应商付款的验证（度假）
bind_checkCondition_component_event();
//环游供应商付款验证的（供应商）
bind_supplierConditionForm_component_event();
}
//环游供应商付款（度假）的验证
function bind_checkCondition_component_event() {
//待收款款订单验证
$("#checkConditionForm").validate({
event: "submit",
errorPlacement: function(error, element) {
},
rules:{
"searchCon.accountNo":{
charNo:true
},
"searchCon.supplierName":{
charString:true
}
},
messages:{
"searchCon.accountNo":{
charNo:"请输入正确的对账编号！"
},
"searchCon.supplierName":{
charString:"请输入正确的供应商名称！"
}
},
//设置验证触发事件
focusInvalid:false,
onkeyup:false,
//设置错误信息提示DOM
errorPlacement:function(error,element){
error.appendTo(element.parent());
}
});
}
//环游供应商付款的验证（供应商）
function bind_supplierConditionForm_component_event() {
//待收款款订单验证
$("#supplierConditionForm").validate({
event: "submit",
errorPlacement: function(error, element) {
},
rules:{
"searchCon.accountNo":{
charNo:true
},
"searchCon.supplierName":{
charString:true
}
},
messages:{
"searchCon.accountNo":{
charNo:"请输入正确的对账编号！"
},
"searchCon.supplierName":{
charString:"请输入正确的供应商名称！"
}
},
//设置验证触发事件
focusInvalid:false,
onkeyup:false,
//设置错误信息提示DOM
errorPlacement:function(error,element){
error.appendTo(element.parent());
}
});
}
});
关于jQuery的校验的API
http://docs.jquery.com/Plugins/Validation/Validator/addMethod
http://www.shopxx.net/html/news/2009/1201/59.html
http://jquery.bassistance.de/api-browser/plugins.html
jquery validate.addMethod 正则表达式 (自定义验证方法)