您的位置:首页 > Web前端 > JQuery

jQuery validate

2014-04-23 14:13 120 查看
项目中使用的jQuery添加的校验的方法

$(document).ready(function(){
5


6



/* 设置默认属性 */
7



$.validator.setDefaults({
8



submitHandler: function(form) {
9

form.submit();
10

}
11

});
12


13

// 字符验证
14



jQuery.validator.addMethod("stringCheck", function(value, element) {
15

return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
16

}, "只能包括中文字、英文字母、数字和下划线");
17


18

// 中文字两个字节
19



jQuery.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

// 身份证号码验证
30



jQuery.validator.addMethod("isIdCardNo", function(value, element) {
31

return this.optional(element) || isIdCardNo(value);
32

}, "请正确输入您的身份证号码");
33


34

// 手机号码验证
35



jQuery.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

// 电话号码验证
42



jQuery.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

// 联系电话(手机/电话皆可)验证
48



jQuery.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

// 邮政编码验证
57



jQuery.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());
}
});
}

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: