2023年6月21日发(作者：)
表单验证⼀、⽤前必备官⽅⽹站：
API:
当前版本：1.5.5需要JQuery版本：1.2.6+, 兼容 1.3.2⼆、默认校验规则(1)required:true 必输字段(2)remote:"" 使⽤ajax⽅法调⽤验证输⼊值(3)email:true 必须输⼊正确格式的电⼦邮件(4)url:true 必须输⼊正确格式的⽹址(5)date:true 必须输⼊正确格式的⽇期(6)dateISO:true 必须输⼊正确格式的⽇期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性(7)number:true 必须输⼊合法的数字(负数，⼩数)(8)digits:true 必须输⼊整数(9)creditcard: 必须输⼊合法的信⽤卡号(10)equalTo:"#field" 输⼊值必须和#field相同(11)accept: 输⼊拥有合法后缀名的字符串（上传⽂件的后缀）(12)maxlength:5 输⼊长度最多是5的字符串(汉字算⼀个字符)(13)minlength:10 输⼊长度最⼩是10的字符串(汉字算⼀个字符)(14)rangelength:[5,10] 输⼊长度必须介于 5 和 10 之间的字符串")(汉字算⼀个字符)(15)range:[5,10] 输⼊值必须介于 5 和 10 之间(16)max:5 输⼊值不能⼤于5(17)min:10 输⼊值不能⼩于10三、默认的提⽰Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.("Please enter no more than {0} characters."),
minlength: $.("Please enter at least {0} characters."),
rangelength: $.("Please enter a value between {0} and {1} characters long."),
range: $.("Please enter a value between {0} and {1}."),
max: $.("Please enter a value less than or equal to {0}."),
min: $.("Please enter a value greater than or equal to {0}.")
},
如需要修改，可在js代码中加⼊：Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
(es, {
required: "必选字段",
remote: "请修正该字段",
email: "请输⼊正确格式的电⼦邮件",
url: "请输⼊合法的⽹址",
date: "请输⼊合法的⽇期",
dateISO: "请输⼊合法的⽇期 (ISO).",
number: "请输⼊合法的数字",
digits: "只能输⼊整数",
creditcard: "请输⼊合法的信⽤卡号",
equalTo: "请再次输⼊相同的值",
accept: "请输⼊拥有合法后缀名的字符串",
maxlength: ("请输⼊⼀个长度最多是 {0} 的字符串"),
minlength: ("请输⼊⼀个长度最少是 {0} 的字符串"),
rangelength: ("请输⼊⼀个长度介于 {0} 和 {1} 之间的字符串"),
range: ("请输⼊⼀个介于 {0} 和 {1} 之间的值"),
max: ("请输⼊⼀个最⼤为 {0} 的值"),
min: ("请输⼊⼀个最⼩为 {0} 的值")
});
推荐做法，将此⽂件放⼊messages_中，在页⾯中引⼊Js代码
1.
四、使⽤⽅式1.将校验规则写到控件中Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
$().ready(function() {
$("#signupForm").validate();
});
使⽤class="{}"的⽅式，必须引⼊包：可以使⽤如下的⽅法，修改提⽰内容：Js代码
1. class="{required:true,minlength:5,messages:{required:'请输⼊内容'}}"
在使⽤equalTo关键字时，后⾯的内容必须加上引号，如下代码：Js代码
1. class="{required:true,minlength:5,equalTo:'#password'}"
另外⼀个⽅式，使⽤关键字：meta（为了元数据使⽤其他插件你要包装 你的验证规则 在他们⾃⼰的项⽬中可以⽤这个特殊的选项）Tell the validation plugin to look inside a validate-property in metadata for validation rules.例如：Js代码
1.
2.
meta: "validate"
再有⼀种⽅式：Js代码
1. $.e("attr", "validate");
这样可以使⽤validate="{required:true}"的⽅式，或者class="required"，但class="{required:true,minlength:5}"将不起作⽤
2.将校验规则写到代码中
Html代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "请输⼊姓名",
email: {
required: "请输⼊Email地址",
email: "请输⼊正确的email地址"
},
password: {
required: "请输⼊密码",
minlength: ("密码不能⼩于{0}个字符")
},
confirm_password: {
required: "请输⼊确认密码",
minlength: "确认密码不能⼩于5个字符",
equalTo: "两次输⼊密码不⼀致不⼀致"
}
}
});
});
//messages处，如果某个控件没有message，将调⽤默认的信息
required:true 必须有值required:"#aa:checked"表达式的值为真，则需要验证required:function(){}返回为真，表时需要验证后边两种常⽤于，表单中需要同时填或不填的元素
五、常⽤⽅法及注意问题1.⽤其他⽅式替代默认的SUBMITJs代码
1.
2.
3.
4.
5.
6.
7.
8.
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
();
}
});
});
可以设置validate的默认值，写法如下：Js代码
1.
2.
3.
$.aults({
submitHandler: function(form) { alert("submitted!");(); }
});
如果想提交表单, 需要使⽤()⽽不要使⽤$(form).submit()，如果这个参数为true，那么表单不会提交，只进⾏检查，调试时⼗分⽅便Js代码
1.
2.
3.
4.
5.
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});
如果⼀个页⾯中有多个表单，⽤Js代码
1.
2.
3.
$.aults({
debug: true
})
：忽略某些元素不验证Js代码
1.
ignore: ".ignore"
lacement：Callback Default: 把错误信息放在验证的元素后⾯
指明错误放置的位置，默认情况是：To(());即把错误信息放在验证的元素后⾯
errorPlacement: function(error, element) {
To(());
}//⽰例：Html代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
Js代码
1.
2.
3.
4.
5.
6.
7.
8.
errorPlacement: function(error, element) {
if ( (":radio") )
To( ().next().next() );
else if ( (":checkbox") )
To ( () );
else
To( ().next() );
}
代码的作⽤是：⼀般情况下把错误信息显⽰在
指定错误提⽰的css类名，可以⾃定义错误提⽰的样式errorElement：String Default: "label"
⽤什么标签标记错误，默认的是label你可以改成emerrorContainer：Selector
显⽰或者隐藏验证信息，可以⾃动实现有错误信息出现时把容器属性变为显⽰，⽆错误时隐藏，⽤处不⼤errorContainer: "#messageBox1, #messageBox2"errorLabelContainer：Selector
把错误信息统⼀放在⼀个容器⾥⾯。wrapper：String⽤什么标签再把上边的errorELement包起来⼀般这三个属性同时使⽤，实现在⼀个容器内显⽰所有错误提⽰的功能，并且没有信息时⾃动隐藏Js代码
1.
2.
3.
errorContainer: "",
errorLabelContainer: $("#signupForm "),
wrapper: "li"
设置错误提⽰的样式，可以增加图标显⽰Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
{ border: 1px solid red; }
{
background:url("./demo/images/") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
d {
background:url("./demo/images/") no-repeat 0px 0px;
}
success：String,Callback
要验证的元素通过验证后的动作，如果跟⼀个字符串，会当做⼀个css类，也可跟⼀个函数Js代码
1.
2.
3.
4.
5.
success: function(label) {
// set as text for IE
(" ").addClass("checked");
//ss("valid").text("Ok!")
}
添加"valid" 到验证元素, 在CSS中定义的样式success: "valid"nsubmit： Boolean Default: true
提交时验证. 设置唯false就⽤其他⽅法去验证onfocusout：Boolean Default: true
失去焦点是验证(不包括checkboxes/radio buttons)
onkeyup：Boolean Default: true
在keyup时验证.onclick：Boolean Default: true
在checkboxes 和 radio 点击时验证focusInvalid：Boolean Default: true
提交表单后，未通过验证的表单(第⼀个或提交之前获得焦点的未通过验证的表单)会获得焦点focusCleanup：Boolean Default: false
如果是true那么当未通过验证的元素获得焦点时，移除错误提⽰。避免和 focusInvalid ⼀起⽤
// 重置表单Java代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
remote：URL$().ready(function() {
var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
();
}
});
$("#reset").click(function() {
orm();
});
});
使⽤ajax⽅式进⾏验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使⽤data选项Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
remote: ""
remote: {
url: "", //后台处理程序
type: "post", //数据发送⽅式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
}
}
}
远程地址只能输出 "true" 或 "false"，不能有其它输出
addMethod：name, method, message⾃定义验证⽅法 Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
// 中⽂字两个字节
hod("byteRangeLength", function(value, element, param) {
var length = ;
for(var i = 0; i < ; i++){
if(deAt(i) > 127){
length++;
}
}
return al(element) || ( length >= param[0] && length <= param[1] );
}, $.("请确保输⼊的值在{0}-{1}个字节之间(⼀个中⽂字算2个字节)"));
// 邮政编码验证
hod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return al(element) || ((value));
}, "请正确填写您的邮政编码");
radio和checkbox、select的验证radio的required表⽰必须选中⼀个
Html代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
checkbox的required表⽰必须选中
checkbox的minlength表⽰必须选中的最⼩个数,maxlength表⽰最⼤的选中个数,rangelength:[2,3]表⽰选中个数区间
select的required表⽰选中的value不能为空
select的minlength表⽰选中的最⼩个数（可多选的select）,maxlength表⽰最⼤的选中个数,rangelength:[2,3]表⽰选中个数区间
//////////////////////////////////////////////////////////////////////////////////////////////
te是监控form，在任何提交表单的操作前te都会检测表单⾥的输⼊项是否满⾜规则，满⾜才允许提交。所以需
要在jQuery(document).ready（）时为form进⾏验证注册
具体代码如下:
te为我们提供了3种验证编写⽅式，各有优缺点：
1、在input对象中书写class样式指定验证规则或属性验证规则：
如
最简单、最便捷，提⽰消息使⽤te的内置的消息（⾃定义扩展验证规则也属于此项），但是由于是以样式名的⽅式进⾏验证，导致了⽇后修改必须找到相应的input对象，同时⽆法使⽤⾼级验证规则，具体说明请向下看
2、同第1条，这种验证规则⽅式也是在input对象中书写class样式，只不过书写的⽅式改为了JSON格式，但是这种⽅式提供了⾃定义验证消息的⽀持：
如
rules: {
name: "required",
email: {
required: true,
email: true
} })})
很好的解决了HTML和验证规则的分离，就是书写较为⿇烦，需要单独写JS脚本，但好处是可以统⼀验证规范，将每个页⾯的验证规则都写在头部的脚本中，⽅便⽇后维护。
注意：以上3种验证⽅式的消息如果未指定都会默认调⽤内置的消息
1、在使⽤上⼀篇中第2种⽅式，以JSON的格式编写验证规则，影响了正常的class使⽤，如何处理？
2、在下，所有的按钮都会提交form表单，所以都会引发验证，如何处理？
3、我希望验证的提⽰信息可以在统⼀的地⽅显⽰，如何处理？
4、我在开发的过程中，我不确定所编写的规则是否正确，如何进⾏调试？
5、我使⽤的是微软AJAX控件，想监控dropdownlist是否选择，为何不起作⽤?
6、radiobox，checkbox，listbox如何进⾏⾼级应⽤？如何指定选择数量？
1点：在使⽤上⼀篇中第2种⽅式，以JSON的格式编写验证规则，影响了正常的class使⽤，如何处理？（具体见）
⾸先看下使⽤第2种⽅式是如何编写验证规则的：
可以看到这样写验证规则虽然简单，但是如果我要为这个控件应⽤其他样式怎么办？所以现在就是处理这个问题的时候了，在页⾯的头部加上⼀句代码：
e("attr", "validate");
由于这种验证规则⽅式需要依赖ta才可以正常运作，所以我们需要在ta上做⽂章，分析下ta的代码，可以看到，默认情况下它是检测控件的class属性：
defaults : {
type: 'class',
name: 'metadata',
cre: /({.*})/,
single: 'metadata'
} 那我们可不可以更改这个属性呢？肯定是可以的，就是在页⾯上加上那句代码，更改其检测的属性。
接着我们还需要修改下页⾯中的代码，将原来所有的"CssClass”改为我们更改的检测属性"validate”、
这样就很好的更改了验证规则所存放的属性了。
第2点：在下，所有的按钮都会提交form表单，所以都会引发验证，如何处理？（具体见中btnNoValidate按钮）
在实际的开发当中，⼀个页⾯上总会有N个按钮，由于的机制特性，所有的控件都会回发页⾯，也就提交了表单，但是此时整个表单都被te所监控，所以只要页⾯中有某个地⽅不符合验证规则，任何回发页⾯的操作都会被拦截住，但是实际上我们需要引发验证的按钮只有1或者2个，⽽其他按钮不需要，这时我们就要想办法了。
其实很简单，就是为不需要引发验证的控件加个样式"cancel"即可，代码如下：
怎么样很简单吧？
第3点：我希望验证的提⽰信息可以在统⼀的地⽅显⽰，如何处理？（具体见）
在开发的过程当中，会有⼀些特殊的需求，就⽐如页⾯上使⽤了tab页⾯，⽽提交按钮就⼀个，这时就需要将验证提⽰信息统⼀放在⼀个位置，好⽅便查看，如图：
要实现这个效果只需在JS编写验证规则时添加：
errorPlacement: function(error, element) {
(()+"
");
To("#errorContainer");
}
error是⼀个label对象⾥⾯包含了错误消息，element则是验证未通过的对象元素，通过errorPlacement可以⽅便的将验证提⽰信息统⼀放⼊⼀个位置。
第4点：我在开发的过程中，我不确定所编写的规则是否正确，如何进⾏调试？（具体见）
这个就⽐较简单了，te默认已经为我们考虑过了，只需在JS编写规则时添加⼀个属性：
debug:true 这样就表⽰现在在调试，这时不会提交表单。
第5点：我使⽤的是微软AJAX控件，想监控dropdownlist是否选择，为何不起作⽤?（具体见中的性别）
在使⽤微软AJAX控件中的dropdownlist级联时，⽐如省市区联动，如果省没有选择，则市和区都是灰的，是disabled状态，是被禁⽤的，类似代码如下：
我这边是强制把这个DropDownList禁⽤了，这时如果为这个控件加上“required”将不会有任何反应，因为在te代码中默认是不验证的，具体代码见414⾏：
not(":submit, :reset, :image, [disabled]")
所以为了⽅便我们使⽤，我们修改下代码，将[disabled]"去除，改为：
not(":submit, :reset, :image")
这样再刷新下页⾯，验证就起作⽤了。
第6点：radiobox，checkbox，listbox如何进⾏⾼级应⽤？如何指定选择数量？（具体请见）
这点我直接引⽤了官⽅关于radiobox，checkbox，listbox应⽤的例⼦，因为官⽅的例⼦已经写的⾮常好了。
1、扩展验证规则，te只提供了⼀些基本的验证功能，并不能满⾜我们⽇常开发的需求，所以我们要为te扩展验证规则。
2、分组验证，在开发的时候有时会遇到的⼀个问题就是，不同按钮引发不同的验证。
⾸先来介绍下第⼀点：扩展验证规则，在te默认的验证规则⽆法满⾜我们的⽇常开发需求的时候，我们需要根据⾃⼰的业务需求指定⼀些相应的规则。（具体见）
为了扩展验证规则，我们⾸先要看下te为我们提供的扩展⽅法： addMethod: function(name, method, message) {
$.s[name] = method;
$.es[name] = message;
if ( < 3) {
$.ssRules(name, $.izeRule(name));
}
},
这段代码就是⽤来扩展验证规则的，意思很简单，就是向te添加验证⽅法。
接收3个参数：name-验证规则名 method-验证规则实现函数（function） message-验证不通过显⽰的错误消息
当我们调⽤了这个⽅法后，我们所写的规则⾃动就会加⼊到te规则中。
好了，我们看下具体如何实现：
⼿机号码验证：
hod("telphoneValid", function(value, element) {
var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|157|158|159|180|187|188|189)d{8}$/;
return (value) || al(element);
}, "请输⼊正确的⼿机号码");
这边的method需要注意的是，这个method实现函数接收2个元素：value：检测的对象的值element：检测的对象
这边我定义了⼀个名为“telphoneValid”的验证规则，在验证规则⾥我⾸先定义了个⼿机验证的正则表达式，然后将值放⼊正则表达式进⾏验证，返回验证结果，返回的错误消息是“请输⼊正确的⼿机号码”。
这样就完成了⼀个简单的⼿机号码验证规则扩展。
第2点：分组验证，这个分组验证在默认的te中默认是不⽀持的，也是我觉得很不爽的，因为在实际的开发过程中经常会碰到需要分组验证的时候。
这点微软的验证控件就做的很好，在微软的控件⾥，默认都有ValidationGroup这个属性，只要把属性名设置为相同就可以进⾏分组验证了，但是te⾃⾝却没提供这个功能，所以我们只能⾃⼰扩展了。 来⼀下具体的场景，在⼀个页⾯⾥有2个tab页⾯，不同tab页⾯需要不同的提交按钮：
这2个就是标准的分组验证情况，如果不设置分组验证的情况下，点击[基本信息提交]和[描述提交]按钮后页⾯上所有的验证都会被相应，这是因为2个按钮都在⼀个form表单中，2个按钮的点击事件默认都是在客户端提交表单，然后由服务器端来分配执⾏代码，所以问题就出现了。
这时我们就需要引⼊分组验证了，这个解决思路是我在⼀个国外的⽹站找到的，不过具体地址我找不到了，这个⽅法有个弊端就是必须是将需要分组的控件必须放⼊不同的容器中，如div,table等，因为采⽤的是标识class样式来进⾏分组验证。
看下具体代码：
8//初始化分组验证function InitValidationGroup() { $('.validationGroup .causesValidation').click(Validate);
$('.validationGroup :text').keydown(function(evt) { if (e == 13) { var $nextInput = $(this).nextAll(':input:first');
if ($(':submit')) { Validate(evt); } else { tDefault(); $(); } } });}function Validate(evt) { var $group = $(this).parents('.validationGroup'); var isValid = true; $(':input').each(function(i, item) { if (!$(item).valid()) isValid = false; }); if (!isValid) tDefault();}
上⾯的代码就是⽤来进⾏分组验证的初始化的，这段代码会找寻页⾯中标有validationGroup样式的元素（分组的容器），然后在这个元素中找带causesValidation样式的元素（这个元素是引发验证的按钮），
上⾯代码实现分组验证的逻辑就是当带causesValidation样式的元素引发验证后会找寻这个元素的⽗级validationGroup元素，然后遍历validationGroup元素下的所有有验证规则的元素判断是否验证通过。
页⾯代码: 8293637383946474849565758596667
分析下代码为2个tab页⾯都加上validationGroup样式，引发验证的按钮加上causesValidation样式，同时还需要标记⼀个isValidationGroup = true; 表⽰页⾯需要进⾏分组验证，传递回母版页。
注意：这边的逻辑和⼿写JS验证规则是⼀个逻辑，在母版页建⽴⼀个isValidationGroup属性默认为false，只有当页⾯需要进⾏分组验证则设为true。
接下来看下母版页的的jQuery(document).ready()中的带代码：
if (isValidationGroup) { if (opts != undefined || opts != null) { jQuery("#<%=Id %>").validate((opts, { onsubmit: false })); } else { jQuery("#<%=Id %>").validate({ onsubmit: false }); } InitValidationGroup();} else { if (opts != undefined || opts != null) { jQuery("#<%=Id %>").validate(opts); } else { jQuery("#<%=Id %>").validate(); }}
判断isValidationGroup是否需要进⾏分组验证，同时如果isValidationGroup为true，需要加⼊onsubmit：false，否则分组验证将⽆法有效。
1、如何使⽤te进⾏AJAX验证?
2、默认te在进⾏AJAX验证时返回必须是bool类型，如何返回⼀个对象包括错误消息及验证结果？
3、在反复使⽤te进⾏AJAX验证时，总是需要编写相关AJAX参数，可否进⾏进⼀步封装？ 第⼀点：如何使⽤te进⾏AJAX验证?（具体见）
te为我们提供了⼀个⽅便的AJAX验证⽅式（封装了jQuery的AJAX，同时将jQuery的AJAX和te的验证很好的结合在⼀起），在此我仅仅介绍te在下如何进⾏AJAX验证，PHP、JSP等请查看官⽅例⼦。
我是采⽤te+WebService进⾏AJAX验证，客户端编写te的remote验证属性，服务器端采⽤WebSerice进⾏接收参数进⾏验证。
⾸先来看下te的remote属性如何编写AJAX验证规则：
1718function InitRules() { opts = { rules: { <%=ID %>:
{ required: true, remote:{ type: "POST", async: false, url: "/CheckUid", dataType: "xml", data: {uid:function(){ return jQuery("#<%=ID %>").val();}} } } } } }
如果使⽤过的朋友肯定会很熟悉这段代码，te的remote采⽤和相同的参数设置（原因就上⾯所说的封装了的原因）。
这边来详细讲解下te的remote的⼀些知识：1、te的remote默认可以直接填写远程验证的地址，格式为：remote:””，但是很多情况下这个远程验证需要提交参数、返回类型等限制，所以就可以采⽤在“{}”中编写具体属性的⽅式来包装提交参数。2、te的remote官⽅代码中，远程的输出只能是true或者false，不允许有其他输出，这个我觉得不太好，具体的扩展在后⾯我会讲到。3、te的remote在使⽤时如果想提交参数需要以JSON的⽅式提交格式如下：12345data: { uid:function(){
return jQuery("#<%=ID %>").val(); }}此处肯定会有⼈不明⽩，为什么参数需要以function的形式提交，⽽不是直接写jQuery("#<%=ID %>").val();这⾥我要说明的是：te的验证规则是在页⾯加载的时候就已经被加载了的，如果还是像以往⼀样直接写"jQuery("#<%=ID %>").val();"，那么验证的时候提交给服务器端的数据永远是页⾯加载时txtUid控件的值。⽽使⽤function的好处就是在页⾯加载的时候仅仅告诉te，在控件需要进⾏remote验证的时候需要调⽤function这个函数，这样就保证了在执⾏remote验证的时候可以获取到最新的值
我还修改了te的remote⽅法，先来看下我修改的代码（具体见scripts/ 896⾏）：
1718if ( !== value) { = value; var validator = this; equest(element); var data = {}; data[] = value; $.ajax($.extend(true, { //url:url,//此URL⽆法获取 url: ,//获取param验证规则中所写路径 mode: "abort", port: "validate" + , type: , dataType: "json", //data:data, data: || data,//获取或data中所提交的参数 success: function(response) { 以下省略...}
这边我修改了url和data的获取⽅式，主要是因为在真正执⾏的时候，变量url是空的，所以需要从param中获取。⽽data为什么要改成 || data，主要原因就是下⾯这句代码：data[] = value;这句代码的意思就是：为哪个控件设置远程验证就获取哪个控件的值，但是在实际的开发中，当遇到进⾏AJAX验证的时候会出现需要同时提交多个数据的情况，此时这句代码就是错误的了，所以需要改成 || data，这样就能保证在提交多个数据的时候以多个数据为准。
下⾯来看下webservice的代码：
[WebMethod]public bool CheckUid(string uid){ return uid == "testuid" ? true : false;}
相当的简单，就是判断下⽤户名是不是指定的⽤户名。
注意：中必须将[Service]这个特性取消注释，否则AJAX验证将⽆效！ 第⼆点：默认te在进⾏AJAX验证时返回必须是bool类型，如何返回⼀个对象包括错误消息及验证结果？（具体见App_Code//CheckUid）
在第⼀点中介绍te知识的时候就提到了，te默认直接收true或false，但是在具体的开发中，我们会分层开发，三层或者多层，webservice在接收到验证请求后不做具体的处理直接调⽤逻辑层的验证⽅法，交由逻辑层进⾏验证操作（当然你也可以把验证全部写在webservice中，但是这样就体现不出分层的好处了），此时的验证会产⽣多种情况，以最常见的⽤户名验证为例：
1）⽤户名已存在，此时的消息应该是“⽤户名已存在，请重新输⼊！”
2）⽤户名不符合规则，此时的消息应该是“⽤户名不符合规则，请重新输⼊！”
3）验证时出现程序异常，此时的消息应该是“程序出现异常，请联系管理员！”
可以看出，仅仅⼀个⽤户名验证就会出现这3种信息，如果不返回⼀个明确的消息，仅仅告诉⽤户“⽤户名有误”，客户端的使⽤者将会相当的痛苦，因为使⽤者并不知道他的⽤户名输⼊到底错在哪了。
所以为了更好的客户体验，以及项⽬的合理性，我们在服务器端封装⼀个实体类（具体见AppCode/AjaxClass），代码如下：
[Serializable]public class AjaxClass{ public string Msg { get; set; } public int Result { get; set; }}
就是⼀个最简单的实体类，有2个属性，Msg和Result，Msg⽤于存放验证失败的信息，Result⽤于存放结果。
看下WebSerivce的代码如何修改： 82930[WebMethod]public AjaxClass CheckUid(string uid){ //return uid == "testuid" ? true : false; AjaxClass ajaxClass = new AjaxClass(); try { if (uid == "testuid") { = "⽤户名已存在,请重新输⼊!"; = 0; } else if (f("test") == -1) { = "⽤户名格式不正确,⽤户名必须包含test,请重新输⼊!"; = 0; } else { = "格式正确!"; = 1; } } catch { = "程序出现异常,请联系管理员!"; = 0; } return ajaxClass;}
上⾯的WebService就完整的实现了我先前说的3种错误情况（由于这边仅仅是例⼦所以就只有表⽰层，实际开发中需要分层开发，此代码应该放⼊业务逻辑层）
注意：在webservice返回值前，如果检查成功必须要为 = 1，否则客户端验证会⽆法通过。
虽然完成了服务器端的代码修改，但是直接运⾏页⾯还是会出错，这是因为我上⾯所说过的，te的remote远程的输出只能是true或者false，我们来看下具体的代码，其中注释掉的就是原来官⽅的代码： 17success: function(response) { if () {//if(response){ var submitted = bmitted; eElement(element); bmitted = submitted; (element); rors(); } else { var errors = {}; //errors[] = || tMessage(element,
"remote"); errors[] = ; rors(errors); } e = ; // = response; = ; quest(element, );}
可以看到⼀共修改了3处地⽅：
1、判断返回值，原来是直接判断response，现在则是判断，因为现在的response已经是⼀个包含消息及结果的对象了。
2、错误消息，原来的错误消息是直接获取默认配置好的消息，我这边是获取。
3、设置previous对象，将previous对象的消息和结果设置为AJAX返回的消息和结果，以供te下⾯代码的返回。
这样te的remote的⽅法就修改了，但是并没有结束，原因是先前在AJAX提交参数的时候由于te的验证规则的缘故，提交的参数并不是以JSON的格式提交的⽽是以{uid:function()}这样的⽅式，结果就导致了⽆法设置的contentType:"application/json; charset=utf-8"，如果设置了会出现以下错误：
这样从webservice返回的AjaxClass对象就⽆法像以往的JSON⽅式直接操作了，所以我们只能换⼀种格式——XML，因为webservice默认返回的数据是XML格式：
-
接下来看下具体的remote⽅法应该如何编写，设置dataType:”xml”，然后将XML数据转换成⼀个对象以供上⾯我修改的te的remote⽅法中ajaxsuccess的使⽤，具体看⼀下代码： 17181920remote:{ type: "POST", dataType:"json", async: false, url: "/CheckUid", data: {uid:function(){ return jQuery("#<%=ID %>").val();}}, dataFilter: function(dataXML) { var result = new Object(); = jQuery(dataXML).find("Result").text(); = jQuery(dataXML).find("Msg").text(); if ( == "-1") { = false; return result; } else { = == "1" ? true : false; return result; } }}
就是⽅法dataFilter，可以在AJAX请求成功后将数据进⾏过滤处理，这⾥我就使⽤了jQuery⽅法把结果和消息从XML中获取出来直接赋给⼀个对象，再将这个对象返回，交由ajaxsuccess使⽤。
这样就算是完成了修改te的remote⽅法，使得可以返回验证结果及验证消息，看下效果图：
第三点：在反复使⽤te进⾏AJAX验证时，总是需要编写相关AJAX参数，可否进⾏进⼀步封装？（具体见和）
在开发⼀个系统的时候经常会⽤到AJAX的验证，⽽如果每次都要编写上⾯那么多的代码还是很不⽅便，所以我现在就来进⾏⼀下简单的封装，代码如下： 22324//远程验证抽象⽅法function GetRemoteInfo(postUrl, data) { var remote = { type: "POST", async: false, url: postUrl, dataType: "xml", data: data, dataFilter: function(dataXML) { var result = new Object(); = jQuery(dataXML).find("Result").text(); = jQuery(dataXML).find("Msg").text(); if ( == "-1") { = false; return result; } else { = == "1" ? true : false; return result; } } }; return remote;}
这个函数主要接收2个参数，⼀个是远程验证的路径和需要提交的参数，返回包装好的remote对象。
页⾯调⽤也很简单，代码如下：
1718
怎么样？相⽐上⾯的代码⼀下⼦⼲净了很多吧？
页⾯上只要做3步操作：
1、包装好需要提交的data对象。 2、将远程验证地址和包装好的data对象传递给封装好的⽅法获取remote对象。
3、将函数返回的remote对象放⼊规则中。
2023年6月21日发(作者：)
表单验证⼀、⽤前必备官⽅⽹站：
API:
当前版本：1.5.5需要JQuery版本：1.2.6+, 兼容 1.3.2⼆、默认校验规则(1)required:true 必输字段(2)remote:"" 使⽤ajax⽅法调⽤验证输⼊值(3)email:true 必须输⼊正确格式的电⼦邮件(4)url:true 必须输⼊正确格式的⽹址(5)date:true 必须输⼊正确格式的⽇期(6)dateISO:true 必须输⼊正确格式的⽇期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性(7)number:true 必须输⼊合法的数字(负数，⼩数)(8)digits:true 必须输⼊整数(9)creditcard: 必须输⼊合法的信⽤卡号(10)equalTo:"#field" 输⼊值必须和#field相同(11)accept: 输⼊拥有合法后缀名的字符串（上传⽂件的后缀）(12)maxlength:5 输⼊长度最多是5的字符串(汉字算⼀个字符)(13)minlength:10 输⼊长度最⼩是10的字符串(汉字算⼀个字符)(14)rangelength:[5,10] 输⼊长度必须介于 5 和 10 之间的字符串")(汉字算⼀个字符)(15)range:[5,10] 输⼊值必须介于 5 和 10 之间(16)max:5 输⼊值不能⼤于5(17)min:10 输⼊值不能⼩于10三、默认的提⽰Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.("Please enter no more than {0} characters."),
minlength: $.("Please enter at least {0} characters."),
rangelength: $.("Please enter a value between {0} and {1} characters long."),
range: $.("Please enter a value between {0} and {1}."),
max: $.("Please enter a value less than or equal to {0}."),
min: $.("Please enter a value greater than or equal to {0}.")
},
如需要修改，可在js代码中加⼊：Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
(es, {
required: "必选字段",
remote: "请修正该字段",
email: "请输⼊正确格式的电⼦邮件",
url: "请输⼊合法的⽹址",
date: "请输⼊合法的⽇期",
dateISO: "请输⼊合法的⽇期 (ISO).",
number: "请输⼊合法的数字",
digits: "只能输⼊整数",
creditcard: "请输⼊合法的信⽤卡号",
equalTo: "请再次输⼊相同的值",
accept: "请输⼊拥有合法后缀名的字符串",
maxlength: ("请输⼊⼀个长度最多是 {0} 的字符串"),
minlength: ("请输⼊⼀个长度最少是 {0} 的字符串"),
rangelength: ("请输⼊⼀个长度介于 {0} 和 {1} 之间的字符串"),
range: ("请输⼊⼀个介于 {0} 和 {1} 之间的值"),
max: ("请输⼊⼀个最⼤为 {0} 的值"),
min: ("请输⼊⼀个最⼩为 {0} 的值")
});
推荐做法，将此⽂件放⼊messages_中，在页⾯中引⼊Js代码
1.
四、使⽤⽅式1.将校验规则写到控件中Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
$().ready(function() {
$("#signupForm").validate();
});
使⽤class="{}"的⽅式，必须引⼊包：可以使⽤如下的⽅法，修改提⽰内容：Js代码
1. class="{required:true,minlength:5,messages:{required:'请输⼊内容'}}"
在使⽤equalTo关键字时，后⾯的内容必须加上引号，如下代码：Js代码
1. class="{required:true,minlength:5,equalTo:'#password'}"
另外⼀个⽅式，使⽤关键字：meta（为了元数据使⽤其他插件你要包装 你的验证规则 在他们⾃⼰的项⽬中可以⽤这个特殊的选项）Tell the validation plugin to look inside a validate-property in metadata for validation rules.例如：Js代码
1.
2.
meta: "validate"
再有⼀种⽅式：Js代码
1. $.e("attr", "validate");
这样可以使⽤validate="{required:true}"的⽅式，或者class="required"，但class="{required:true,minlength:5}"将不起作⽤
2.将校验规则写到代码中
Html代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "请输⼊姓名",
email: {
required: "请输⼊Email地址",
email: "请输⼊正确的email地址"
},
password: {
required: "请输⼊密码",
minlength: ("密码不能⼩于{0}个字符")
},
confirm_password: {
required: "请输⼊确认密码",
minlength: "确认密码不能⼩于5个字符",
equalTo: "两次输⼊密码不⼀致不⼀致"
}
}
});
});
//messages处，如果某个控件没有message，将调⽤默认的信息
required:true 必须有值required:"#aa:checked"表达式的值为真，则需要验证required:function(){}返回为真，表时需要验证后边两种常⽤于，表单中需要同时填或不填的元素
五、常⽤⽅法及注意问题1.⽤其他⽅式替代默认的SUBMITJs代码
1.
2.
3.
4.
5.
6.
7.
8.
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
();
}
});
});
可以设置validate的默认值，写法如下：Js代码
1.
2.
3.
$.aults({
submitHandler: function(form) { alert("submitted!");(); }
});
如果想提交表单, 需要使⽤()⽽不要使⽤$(form).submit()，如果这个参数为true，那么表单不会提交，只进⾏检查，调试时⼗分⽅便Js代码
1.
2.
3.
4.
5.
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});
如果⼀个页⾯中有多个表单，⽤Js代码
1.
2.
3.
$.aults({
debug: true
})
：忽略某些元素不验证Js代码
1.
ignore: ".ignore"
lacement：Callback Default: 把错误信息放在验证的元素后⾯
指明错误放置的位置，默认情况是：To(());即把错误信息放在验证的元素后⾯
errorPlacement: function(error, element) {
To(());
}//⽰例：Html代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
Js代码
1.
2.
3.
4.
5.
6.
7.
8.
errorPlacement: function(error, element) {
if ( (":radio") )
To( ().next().next() );
else if ( (":checkbox") )
To ( () );
else
To( ().next() );
}
代码的作⽤是：⼀般情况下把错误信息显⽰在
指定错误提⽰的css类名，可以⾃定义错误提⽰的样式errorElement：String Default: "label"
⽤什么标签标记错误，默认的是label你可以改成emerrorContainer：Selector
显⽰或者隐藏验证信息，可以⾃动实现有错误信息出现时把容器属性变为显⽰，⽆错误时隐藏，⽤处不⼤errorContainer: "#messageBox1, #messageBox2"errorLabelContainer：Selector
把错误信息统⼀放在⼀个容器⾥⾯。wrapper：String⽤什么标签再把上边的errorELement包起来⼀般这三个属性同时使⽤，实现在⼀个容器内显⽰所有错误提⽰的功能，并且没有信息时⾃动隐藏Js代码
1.
2.
3.
errorContainer: "",
errorLabelContainer: $("#signupForm "),
wrapper: "li"
设置错误提⽰的样式，可以增加图标显⽰Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
{ border: 1px solid red; }
{
background:url("./demo/images/") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
d {
background:url("./demo/images/") no-repeat 0px 0px;
}
success：String,Callback
要验证的元素通过验证后的动作，如果跟⼀个字符串，会当做⼀个css类，也可跟⼀个函数Js代码
1.
2.
3.
4.
5.
success: function(label) {
// set as text for IE
(" ").addClass("checked");
//ss("valid").text("Ok!")
}
添加"valid" 到验证元素, 在CSS中定义的样式success: "valid"nsubmit： Boolean Default: true
提交时验证. 设置唯false就⽤其他⽅法去验证onfocusout：Boolean Default: true
失去焦点是验证(不包括checkboxes/radio buttons)
onkeyup：Boolean Default: true
在keyup时验证.onclick：Boolean Default: true
在checkboxes 和 radio 点击时验证focusInvalid：Boolean Default: true
提交表单后，未通过验证的表单(第⼀个或提交之前获得焦点的未通过验证的表单)会获得焦点focusCleanup：Boolean Default: false
如果是true那么当未通过验证的元素获得焦点时，移除错误提⽰。避免和 focusInvalid ⼀起⽤
// 重置表单Java代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
remote：URL$().ready(function() {
var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
();
}
});
$("#reset").click(function() {
orm();
});
});
使⽤ajax⽅式进⾏验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使⽤data选项Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
remote: ""
remote: {
url: "", //后台处理程序
type: "post", //数据发送⽅式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
}
}
}
远程地址只能输出 "true" 或 "false"，不能有其它输出
addMethod：name, method, message⾃定义验证⽅法 Js代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
// 中⽂字两个字节
hod("byteRangeLength", function(value, element, param) {
var length = ;
for(var i = 0; i < ; i++){
if(deAt(i) > 127){
length++;
}
}
return al(element) || ( length >= param[0] && length <= param[1] );
}, $.("请确保输⼊的值在{0}-{1}个字节之间(⼀个中⽂字算2个字节)"));
// 邮政编码验证
hod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return al(element) || ((value));
}, "请正确填写您的邮政编码");
radio和checkbox、select的验证radio的required表⽰必须选中⼀个
Html代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
checkbox的required表⽰必须选中
checkbox的minlength表⽰必须选中的最⼩个数,maxlength表⽰最⼤的选中个数,rangelength:[2,3]表⽰选中个数区间
select的required表⽰选中的value不能为空
select的minlength表⽰选中的最⼩个数（可多选的select）,maxlength表⽰最⼤的选中个数,rangelength:[2,3]表⽰选中个数区间
//////////////////////////////////////////////////////////////////////////////////////////////
te是监控form，在任何提交表单的操作前te都会检测表单⾥的输⼊项是否满⾜规则，满⾜才允许提交。所以需
要在jQuery(document).ready（）时为form进⾏验证注册
具体代码如下:
te为我们提供了3种验证编写⽅式，各有优缺点：
1、在input对象中书写class样式指定验证规则或属性验证规则：
如
最简单、最便捷，提⽰消息使⽤te的内置的消息（⾃定义扩展验证规则也属于此项），但是由于是以样式名的⽅式进⾏验证，导致了⽇后修改必须找到相应的input对象，同时⽆法使⽤⾼级验证规则，具体说明请向下看
2、同第1条，这种验证规则⽅式也是在input对象中书写class样式，只不过书写的⽅式改为了JSON格式，但是这种⽅式提供了⾃定义验证消息的⽀持：
如
rules: {
name: "required",
email: {
required: true,
email: true
} })})
很好的解决了HTML和验证规则的分离，就是书写较为⿇烦，需要单独写JS脚本，但好处是可以统⼀验证规范，将每个页⾯的验证规则都写在头部的脚本中，⽅便⽇后维护。
注意：以上3种验证⽅式的消息如果未指定都会默认调⽤内置的消息
1、在使⽤上⼀篇中第2种⽅式，以JSON的格式编写验证规则，影响了正常的class使⽤，如何处理？
2、在下，所有的按钮都会提交form表单，所以都会引发验证，如何处理？
3、我希望验证的提⽰信息可以在统⼀的地⽅显⽰，如何处理？
4、我在开发的过程中，我不确定所编写的规则是否正确，如何进⾏调试？
5、我使⽤的是微软AJAX控件，想监控dropdownlist是否选择，为何不起作⽤?
6、radiobox，checkbox，listbox如何进⾏⾼级应⽤？如何指定选择数量？
1点：在使⽤上⼀篇中第2种⽅式，以JSON的格式编写验证规则，影响了正常的class使⽤，如何处理？（具体见）
⾸先看下使⽤第2种⽅式是如何编写验证规则的：
可以看到这样写验证规则虽然简单，但是如果我要为这个控件应⽤其他样式怎么办？所以现在就是处理这个问题的时候了，在页⾯的头部加上⼀句代码：
e("attr", "validate");
由于这种验证规则⽅式需要依赖ta才可以正常运作，所以我们需要在ta上做⽂章，分析下ta的代码，可以看到，默认情况下它是检测控件的class属性：
defaults : {
type: 'class',
name: 'metadata',
cre: /({.*})/,
single: 'metadata'
} 那我们可不可以更改这个属性呢？肯定是可以的，就是在页⾯上加上那句代码，更改其检测的属性。
接着我们还需要修改下页⾯中的代码，将原来所有的"CssClass”改为我们更改的检测属性"validate”、
这样就很好的更改了验证规则所存放的属性了。
第2点：在下，所有的按钮都会提交form表单，所以都会引发验证，如何处理？（具体见中btnNoValidate按钮）
在实际的开发当中，⼀个页⾯上总会有N个按钮，由于的机制特性，所有的控件都会回发页⾯，也就提交了表单，但是此时整个表单都被te所监控，所以只要页⾯中有某个地⽅不符合验证规则，任何回发页⾯的操作都会被拦截住，但是实际上我们需要引发验证的按钮只有1或者2个，⽽其他按钮不需要，这时我们就要想办法了。
其实很简单，就是为不需要引发验证的控件加个样式"cancel"即可，代码如下：
怎么样很简单吧？
第3点：我希望验证的提⽰信息可以在统⼀的地⽅显⽰，如何处理？（具体见）
在开发的过程当中，会有⼀些特殊的需求，就⽐如页⾯上使⽤了tab页⾯，⽽提交按钮就⼀个，这时就需要将验证提⽰信息统⼀放在⼀个位置，好⽅便查看，如图：
要实现这个效果只需在JS编写验证规则时添加：
errorPlacement: function(error, element) {
(()+"
");
To("#errorContainer");
}
error是⼀个label对象⾥⾯包含了错误消息，element则是验证未通过的对象元素，通过errorPlacement可以⽅便的将验证提⽰信息统⼀放⼊⼀个位置。
第4点：我在开发的过程中，我不确定所编写的规则是否正确，如何进⾏调试？（具体见）
这个就⽐较简单了，te默认已经为我们考虑过了，只需在JS编写规则时添加⼀个属性：
debug:true 这样就表⽰现在在调试，这时不会提交表单。
第5点：我使⽤的是微软AJAX控件，想监控dropdownlist是否选择，为何不起作⽤?（具体见中的性别）
在使⽤微软AJAX控件中的dropdownlist级联时，⽐如省市区联动，如果省没有选择，则市和区都是灰的，是disabled状态，是被禁⽤的，类似代码如下：
我这边是强制把这个DropDownList禁⽤了，这时如果为这个控件加上“required”将不会有任何反应，因为在te代码中默认是不验证的，具体代码见414⾏：
not(":submit, :reset, :image, [disabled]")
所以为了⽅便我们使⽤，我们修改下代码，将[disabled]"去除，改为：
not(":submit, :reset, :image")
这样再刷新下页⾯，验证就起作⽤了。
第6点：radiobox，checkbox，listbox如何进⾏⾼级应⽤？如何指定选择数量？（具体请见）
这点我直接引⽤了官⽅关于radiobox，checkbox，listbox应⽤的例⼦，因为官⽅的例⼦已经写的⾮常好了。
1、扩展验证规则，te只提供了⼀些基本的验证功能，并不能满⾜我们⽇常开发的需求，所以我们要为te扩展验证规则。
2、分组验证，在开发的时候有时会遇到的⼀个问题就是，不同按钮引发不同的验证。
⾸先来介绍下第⼀点：扩展验证规则，在te默认的验证规则⽆法满⾜我们的⽇常开发需求的时候，我们需要根据⾃⼰的业务需求指定⼀些相应的规则。（具体见）
为了扩展验证规则，我们⾸先要看下te为我们提供的扩展⽅法： addMethod: function(name, method, message) {
$.s[name] = method;
$.es[name] = message;
if ( < 3) {
$.ssRules(name, $.izeRule(name));
}
},
这段代码就是⽤来扩展验证规则的，意思很简单，就是向te添加验证⽅法。
接收3个参数：name-验证规则名 method-验证规则实现函数（function） message-验证不通过显⽰的错误消息
当我们调⽤了这个⽅法后，我们所写的规则⾃动就会加⼊到te规则中。
好了，我们看下具体如何实现：
⼿机号码验证：
hod("telphoneValid", function(value, element) {
var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|157|158|159|180|187|188|189)d{8}$/;
return (value) || al(element);
}, "请输⼊正确的⼿机号码");
这边的method需要注意的是，这个method实现函数接收2个元素：value：检测的对象的值element：检测的对象
这边我定义了⼀个名为“telphoneValid”的验证规则，在验证规则⾥我⾸先定义了个⼿机验证的正则表达式，然后将值放⼊正则表达式进⾏验证，返回验证结果，返回的错误消息是“请输⼊正确的⼿机号码”。
这样就完成了⼀个简单的⼿机号码验证规则扩展。
第2点：分组验证，这个分组验证在默认的te中默认是不⽀持的，也是我觉得很不爽的，因为在实际的开发过程中经常会碰到需要分组验证的时候。
这点微软的验证控件就做的很好，在微软的控件⾥，默认都有ValidationGroup这个属性，只要把属性名设置为相同就可以进⾏分组验证了，但是te⾃⾝却没提供这个功能，所以我们只能⾃⼰扩展了。 来⼀下具体的场景，在⼀个页⾯⾥有2个tab页⾯，不同tab页⾯需要不同的提交按钮：
这2个就是标准的分组验证情况，如果不设置分组验证的情况下，点击[基本信息提交]和[描述提交]按钮后页⾯上所有的验证都会被相应，这是因为2个按钮都在⼀个form表单中，2个按钮的点击事件默认都是在客户端提交表单，然后由服务器端来分配执⾏代码，所以问题就出现了。
这时我们就需要引⼊分组验证了，这个解决思路是我在⼀个国外的⽹站找到的，不过具体地址我找不到了，这个⽅法有个弊端就是必须是将需要分组的控件必须放⼊不同的容器中，如div,table等，因为采⽤的是标识class样式来进⾏分组验证。
看下具体代码：
8//初始化分组验证function InitValidationGroup() { $('.validationGroup .causesValidation').click(Validate);
$('.validationGroup :text').keydown(function(evt) { if (e == 13) { var $nextInput = $(this).nextAll(':input:first');
if ($(':submit')) { Validate(evt); } else { tDefault(); $(); } } });}function Validate(evt) { var $group = $(this).parents('.validationGroup'); var isValid = true; $(':input').each(function(i, item) { if (!$(item).valid()) isValid = false; }); if (!isValid) tDefault();}
上⾯的代码就是⽤来进⾏分组验证的初始化的，这段代码会找寻页⾯中标有validationGroup样式的元素（分组的容器），然后在这个元素中找带causesValidation样式的元素（这个元素是引发验证的按钮），
上⾯代码实现分组验证的逻辑就是当带causesValidation样式的元素引发验证后会找寻这个元素的⽗级validationGroup元素，然后遍历validationGroup元素下的所有有验证规则的元素判断是否验证通过。
页⾯代码: 8293637383946474849565758596667
分析下代码为2个tab页⾯都加上validationGroup样式，引发验证的按钮加上causesValidation样式，同时还需要标记⼀个isValidationGroup = true; 表⽰页⾯需要进⾏分组验证，传递回母版页。
注意：这边的逻辑和⼿写JS验证规则是⼀个逻辑，在母版页建⽴⼀个isValidationGroup属性默认为false，只有当页⾯需要进⾏分组验证则设为true。
接下来看下母版页的的jQuery(document).ready()中的带代码：
if (isValidationGroup) { if (opts != undefined || opts != null) { jQuery("#<%=Id %>").validate((opts, { onsubmit: false })); } else { jQuery("#<%=Id %>").validate({ onsubmit: false }); } InitValidationGroup();} else { if (opts != undefined || opts != null) { jQuery("#<%=Id %>").validate(opts); } else { jQuery("#<%=Id %>").validate(); }}
判断isValidationGroup是否需要进⾏分组验证，同时如果isValidationGroup为true，需要加⼊onsubmit：false，否则分组验证将⽆法有效。
1、如何使⽤te进⾏AJAX验证?
2、默认te在进⾏AJAX验证时返回必须是bool类型，如何返回⼀个对象包括错误消息及验证结果？
3、在反复使⽤te进⾏AJAX验证时，总是需要编写相关AJAX参数，可否进⾏进⼀步封装？ 第⼀点：如何使⽤te进⾏AJAX验证?（具体见）
te为我们提供了⼀个⽅便的AJAX验证⽅式（封装了jQuery的AJAX，同时将jQuery的AJAX和te的验证很好的结合在⼀起），在此我仅仅介绍te在下如何进⾏AJAX验证，PHP、JSP等请查看官⽅例⼦。
我是采⽤te+WebService进⾏AJAX验证，客户端编写te的remote验证属性，服务器端采⽤WebSerice进⾏接收参数进⾏验证。
⾸先来看下te的remote属性如何编写AJAX验证规则：
1718function InitRules() { opts = { rules: { <%=ID %>:
{ required: true, remote:{ type: "POST", async: false, url: "/CheckUid", dataType: "xml", data: {uid:function(){ return jQuery("#<%=ID %>").val();}} } } } } }
如果使⽤过的朋友肯定会很熟悉这段代码，te的remote采⽤和相同的参数设置（原因就上⾯所说的封装了的原因）。
这边来详细讲解下te的remote的⼀些知识：1、te的remote默认可以直接填写远程验证的地址，格式为：remote:””，但是很多情况下这个远程验证需要提交参数、返回类型等限制，所以就可以采⽤在“{}”中编写具体属性的⽅式来包装提交参数。2、te的remote官⽅代码中，远程的输出只能是true或者false，不允许有其他输出，这个我觉得不太好，具体的扩展在后⾯我会讲到。3、te的remote在使⽤时如果想提交参数需要以JSON的⽅式提交格式如下：12345data: { uid:function(){
return jQuery("#<%=ID %>").val(); }}此处肯定会有⼈不明⽩，为什么参数需要以function的形式提交，⽽不是直接写jQuery("#<%=ID %>").val();这⾥我要说明的是：te的验证规则是在页⾯加载的时候就已经被加载了的，如果还是像以往⼀样直接写"jQuery("#<%=ID %>").val();"，那么验证的时候提交给服务器端的数据永远是页⾯加载时txtUid控件的值。⽽使⽤function的好处就是在页⾯加载的时候仅仅告诉te，在控件需要进⾏remote验证的时候需要调⽤function这个函数，这样就保证了在执⾏remote验证的时候可以获取到最新的值
我还修改了te的remote⽅法，先来看下我修改的代码（具体见scripts/ 896⾏）：
1718if ( !== value) { = value; var validator = this; equest(element); var data = {}; data[] = value; $.ajax($.extend(true, { //url:url,//此URL⽆法获取 url: ,//获取param验证规则中所写路径 mode: "abort", port: "validate" + , type: , dataType: "json", //data:data, data: || data,//获取或data中所提交的参数 success: function(response) { 以下省略...}
这边我修改了url和data的获取⽅式，主要是因为在真正执⾏的时候，变量url是空的，所以需要从param中获取。⽽data为什么要改成 || data，主要原因就是下⾯这句代码：data[] = value;这句代码的意思就是：为哪个控件设置远程验证就获取哪个控件的值，但是在实际的开发中，当遇到进⾏AJAX验证的时候会出现需要同时提交多个数据的情况，此时这句代码就是错误的了，所以需要改成 || data，这样就能保证在提交多个数据的时候以多个数据为准。
下⾯来看下webservice的代码：
[WebMethod]public bool CheckUid(string uid){ return uid == "testuid" ? true : false;}
相当的简单，就是判断下⽤户名是不是指定的⽤户名。
注意：中必须将[Service]这个特性取消注释，否则AJAX验证将⽆效！ 第⼆点：默认te在进⾏AJAX验证时返回必须是bool类型，如何返回⼀个对象包括错误消息及验证结果？（具体见App_Code//CheckUid）
在第⼀点中介绍te知识的时候就提到了，te默认直接收true或false，但是在具体的开发中，我们会分层开发，三层或者多层，webservice在接收到验证请求后不做具体的处理直接调⽤逻辑层的验证⽅法，交由逻辑层进⾏验证操作（当然你也可以把验证全部写在webservice中，但是这样就体现不出分层的好处了），此时的验证会产⽣多种情况，以最常见的⽤户名验证为例：
1）⽤户名已存在，此时的消息应该是“⽤户名已存在，请重新输⼊！”
2）⽤户名不符合规则，此时的消息应该是“⽤户名不符合规则，请重新输⼊！”
3）验证时出现程序异常，此时的消息应该是“程序出现异常，请联系管理员！”
可以看出，仅仅⼀个⽤户名验证就会出现这3种信息，如果不返回⼀个明确的消息，仅仅告诉⽤户“⽤户名有误”，客户端的使⽤者将会相当的痛苦，因为使⽤者并不知道他的⽤户名输⼊到底错在哪了。
所以为了更好的客户体验，以及项⽬的合理性，我们在服务器端封装⼀个实体类（具体见AppCode/AjaxClass），代码如下：
[Serializable]public class AjaxClass{ public string Msg { get; set; } public int Result { get; set; }}
就是⼀个最简单的实体类，有2个属性，Msg和Result，Msg⽤于存放验证失败的信息，Result⽤于存放结果。
看下WebSerivce的代码如何修改： 82930[WebMethod]public AjaxClass CheckUid(string uid){ //return uid == "testuid" ? true : false; AjaxClass ajaxClass = new AjaxClass(); try { if (uid == "testuid") { = "⽤户名已存在,请重新输⼊!"; = 0; } else if (f("test") == -1) { = "⽤户名格式不正确,⽤户名必须包含test,请重新输⼊!"; = 0; } else { = "格式正确!"; = 1; } } catch { = "程序出现异常,请联系管理员!"; = 0; } return ajaxClass;}
上⾯的WebService就完整的实现了我先前说的3种错误情况（由于这边仅仅是例⼦所以就只有表⽰层，实际开发中需要分层开发，此代码应该放⼊业务逻辑层）
注意：在webservice返回值前，如果检查成功必须要为 = 1，否则客户端验证会⽆法通过。
虽然完成了服务器端的代码修改，但是直接运⾏页⾯还是会出错，这是因为我上⾯所说过的，te的remote远程的输出只能是true或者false，我们来看下具体的代码，其中注释掉的就是原来官⽅的代码： 17success: function(response) { if () {//if(response){ var submitted = bmitted; eElement(element); bmitted = submitted; (element); rors(); } else { var errors = {}; //errors[] = || tMessage(element,
"remote"); errors[] = ; rors(errors); } e = ; // = response; = ; quest(element, );}
可以看到⼀共修改了3处地⽅：
1、判断返回值，原来是直接判断response，现在则是判断，因为现在的response已经是⼀个包含消息及结果的对象了。
2、错误消息，原来的错误消息是直接获取默认配置好的消息，我这边是获取。
3、设置previous对象，将previous对象的消息和结果设置为AJAX返回的消息和结果，以供te下⾯代码的返回。
这样te的remote的⽅法就修改了，但是并没有结束，原因是先前在AJAX提交参数的时候由于te的验证规则的缘故，提交的参数并不是以JSON的格式提交的⽽是以{uid:function()}这样的⽅式，结果就导致了⽆法设置的contentType:"application/json; charset=utf-8"，如果设置了会出现以下错误：
这样从webservice返回的AjaxClass对象就⽆法像以往的JSON⽅式直接操作了，所以我们只能换⼀种格式——XML，因为webservice默认返回的数据是XML格式：
-
接下来看下具体的remote⽅法应该如何编写，设置dataType:”xml”，然后将XML数据转换成⼀个对象以供上⾯我修改的te的remote⽅法中ajaxsuccess的使⽤，具体看⼀下代码： 17181920remote:{ type: "POST", dataType:"json", async: false, url: "/CheckUid", data: {uid:function(){ return jQuery("#<%=ID %>").val();}}, dataFilter: function(dataXML) { var result = new Object(); = jQuery(dataXML).find("Result").text(); = jQuery(dataXML).find("Msg").text(); if ( == "-1") { = false; return result; } else { = == "1" ? true : false; return result; } }}
就是⽅法dataFilter，可以在AJAX请求成功后将数据进⾏过滤处理，这⾥我就使⽤了jQuery⽅法把结果和消息从XML中获取出来直接赋给⼀个对象，再将这个对象返回，交由ajaxsuccess使⽤。
这样就算是完成了修改te的remote⽅法，使得可以返回验证结果及验证消息，看下效果图：
第三点：在反复使⽤te进⾏AJAX验证时，总是需要编写相关AJAX参数，可否进⾏进⼀步封装？（具体见和）
在开发⼀个系统的时候经常会⽤到AJAX的验证，⽽如果每次都要编写上⾯那么多的代码还是很不⽅便，所以我现在就来进⾏⼀下简单的封装，代码如下： 22324//远程验证抽象⽅法function GetRemoteInfo(postUrl, data) { var remote = { type: "POST", async: false, url: postUrl, dataType: "xml", data: data, dataFilter: function(dataXML) { var result = new Object(); = jQuery(dataXML).find("Result").text(); = jQuery(dataXML).find("Msg").text(); if ( == "-1") { = false; return result; } else { = == "1" ? true : false; return result; } } }; return remote;}
这个函数主要接收2个参数，⼀个是远程验证的路径和需要提交的参数，返回包装好的remote对象。
页⾯调⽤也很简单，代码如下：
1718
怎么样？相⽐上⾯的代码⼀下⼦⼲净了很多吧？
页⾯上只要做3步操作：
1、包装好需要提交的data对象。 2、将远程验证地址和包装好的data对象传递给封装好的⽅法获取remote对象。
3、将函数返回的remote对象放⼊规则中。
发布评论