$(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
分享到：
相关推荐
自定义验证方法 除了预定义的验证规则，开发者还可以添加自己的验证方法。这通常涉及到注册新的方法并指定验证规则和对应的错误消息。 ### 8. 使用示例 以下是一个简单的使用示例，展示了如何应用jQuery ...
`jQuery validator addMethod`是jQuery Validation Plugin中的一个关键功能，允许开发者自定义验证方法。当你发现内置的验证规则不能满足特定需求时，可以利用这个方法创建自己的验证逻辑。下面我们将详细介绍其用法...
**jQuery Validate 自定义验证规则详解** 在Web开发中，表单验证是不可或缺的一部分，它可以确保用户输入的数据符合预设的规范，从而保证数据的准确性和安全性。jQuery Validate 是一个非常流行的JavaScript库，它...
1. **自定义验证方法**：可以扩展Validator，添加自定义验证规则： ```javascript $.validator.addMethod("customMethod", function(value, element) { // 验证逻辑 }, "自定义错误消息"); ``` 2. **分组验证...
**jQuery自定义验证**是一种强大的前端验证解决方案，它允许开发者根据项目需求定制验证规则和提示信息，提升用户体验。本文将深入探讨jQuery自定义验证的核心概念、功能和应用场景，以及如何利用正则表达式和非空...
2. **JavaScript文件**：可能包含了自定义验证规则的实现，或者对jQuery Validate的配置和扩展。 3. **HTML模板**：可能展示了如何在实际表单中应用这些自定义样式和规则。 通过结合使用这些文件，你可以构建出符合...
jQuery EasyUI 是一个基于 jQuery 的用户界面插件集合，它包含了一系列丰富的 UI 组件，并且支持自定义验证规则。本文将详细介绍如何自定义 jQuery EasyUI 的验证规则，并通过具体示例来说明各个验证规则的功能与...
jQuery Validator允许自定义验证规则。例如，要创建一个检查邮箱格式的规则，可以这样写： ```javascript $.validator.addMethod("email", function(value, element) { return this.optional(element) || /^[a-zA-...
对于更深入的使用，可以参考提供的API中文文档`API中文.pdf`，其中详细介绍了各个方法、参数和配置选项的使用，以及如何自定义验证规则和错误提示，帮助开发者更好地理解和利用这个插件。 总结，jQuery Validator ...
在jQuery Validate中，自定义验证方法的添加是通过$.validator.addMethod方法实现的。该方法接受三个参数：一个是方法的名称，一个是验证函数，还有一个是当验证失败时显示的错误信息。自定义验证方法可以在页面加载...
在探讨`jQuery Validator`的实用性及其验证信息时，我们深入剖析了这一强大的前端表单验证插件如何通过一系列预定义的规则和自定义方法来确保数据的准确性和完整性。`jQuery Validator`是`jQuery`库的一个扩展，它极...
BootstrapValidator是针对Bootstrap3框架的一款高效且易于使用的jQuery表单验证插件，它极大地简化了在Web应用中实现复杂表单验证的过程。这款插件利用HTML5的数据属性（data attributes）来设定验证规则，使得...
jquery easyui validator 扩展自定义验证方法
综上所述，jQuery Validator 作为一款强大的表单验证插件，不仅提供了丰富的内置验证规则，还支持自定义提示信息，极大地简化了前端表单验证的工作量。无论是初学者还是有经验的开发者，都能够迅速上手并发挥其优势...
BootstrapValidator是一个基于jQuery的验证插件，用于前端表单验证。它与Bootstrap框架紧密集成，可以利用Bootstrap的样式和响应式特性，提升用户体验。在使用BootstrapValidator之前，需要先了解如何引入相关文件...
2. **自定义验证**：除了预设规则，Validation Engine还允许开发者创建自定义验证方法，以应对特定的业务需求或复杂的验证逻辑。 3. **友好的错误提示**：当用户输入不符合规则时，Validation Engine可以即时显示...
jQuery_Validator的主要功能包括验证必填字段、邮箱格式、数字范围、日期格式等，同时支持自定义验证方法，以满足复杂业务需求。 结合Struts2和jQuery_Validator，开发者可以在前端使用jQuery_Validator进行实时的...
如果预设的验证规则不能满足需求，可以创建自定义验证规则。通过`.addMethod()`方法添加新的验证函数，如： ```javascript $.validator.addMethod("customRule", function(value, element) { // 自定义验证逻辑 ...
最后，我们将这个自定义验证方法应用到表单字段上，通常是通过设置`rules`属性： ```javascript $("#yourInputField").rules("add", { formula: true, // 使用自定义的验证方法 messages: { formula: "请正确...