使用jQuery.Validate进行客户端验证
以前在做项目的时候就有个很大心病，就是微软的验证控件，虽然微软的验证控件可以帮我们完成大部分的验证，验证也很可靠上手也很容易，但是我就是觉得不爽，主要理由有以下几点：
1、拖控件太麻烦，这个是微软控件的常用方式，你要使用一个控件你得从工具栏中拖到页面里（当然你也可以不拖手写）。
2、必须指定验证对象，验证控件与其他textbox，dropdownlist控件不同的是它是验证其他控件的输入是否有效的，所以必须指定所验证的对象。
3、影响整个页面美观，像一些管理系统总是需要进行大量的用户输入验证，所以就可能导致一个页面上有几十个验证控件严重影响了原来页面里的东西，看起来十分不舒服。
4、ajax验证不方便，现在的系统越来越注重客户的用户体验，所以ajax验证必不可少，但是微软的验证控件并没有提供ajax验证（当然你也可以通过微软的UpdatePanel来进行），需要自己去扩展。
说了上面那么多，我只是表明我的意思，微软的验证控件不太好用，所以这时候我就在想有没一些好用点的验证控件呢？
有2个方法：1、自己编写一个（考虑到自己水平还没那么高，想想还是算了）
2、去找一个已经完善的验证控件（这个比较靠谱，毕竟我做不到，别人还是能做到的）
所以按照我的要求：1、不用拖控件
2、不影响页面代码
3、简单的AJAX验证
去网络搜寻找到了2种类型的：1、自己编写的ASP.NET验证控件，虽然封装了比较多的功能但是还是满足不了我需求
2、javascript类型的验证函数库，这个比较靠谱，毕竟js可以和页面代码分离（不影响页面代码），只需要调用函数库里的验证代码就可以进行指定对象的验证了（不用拖控件），同时ajax本质还是要靠javascript来调用（AJAX验证）
所以我根据上面第2条线索就搜索使用javascript编写的验证库——jQuery.Validate，这个验证库是属于jQuery的插件，是由bassistance.de编写的，bassistance.de还提供许多jQuery其他插件，如Accordion，Autocomplete（我的使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进了键盘上下选择体验)就是基于这个autocomplete编写的），Tooltip等等（具体的可以上他们的网站查看）。
决定使用jQuery.Validate首先下载其JS插件:
进入http://bassistance.de/jquery-plugins/jquery-plugin-validation/选择DownLoad下载,里面包含了许多示例可供我们学习
接下来我们就开始正式使用了，建立一个基本的网站，建立好一个母版页（这边使用母版页是因为具体的一些项目中都会有一个母版页来存放一些公用的东西，这边为了模拟一个真实的环境，所以建立母版页，如果觉得不需要可以不建立直接建立页面即可），然后把jQuery和jQuery.Validate都引入母版页：
<script src='<%= Page.ResolveClientUrl("~/scripts/jquery-1.4.1.js") %>' type="text/javascript"></script>
<script src='<%= Page.ResolveClientUrl("~/scripts/jquery.validate1.js") %>' type="text/javascript"></script>
小技巧：与一般的引用不同，我这边把脚本的路径采用Page.ResolveClientUrl进行获取，由于在一些项目开发中，不同模块的代码会分不同的目录来操作，而母版页一半是在网站的根目录所以为了保证所有页面的基本都可以引用到，所以需要将路径进行重新获取（不过这样做也有不好之处就是这样无法在后台的代码中动态为<header>添加东西，编译器会报错，解决办法是在<header>中放入一个literal控件，在后台代码里重新拼字符串赋给literal）。
在引用完基本所需的脚本后就在母版页中添加脚本来进行验证。
jQuery.Validate是监控form，在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则，满足才允许提交。所以需
要在jQuery(document).ready（）时为form进行验证注册
具体代码如下:
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
<
asp:ContentPlaceHolder
ID
="ContentPlaceHolder1"
runat
="server"
>
</
asp:ContentPlaceHolder
>
</
div
>
</
form
>
<
script
type
="text/javascript"
>
jQuery(document).ready(
function
() {
jQuery(
"
#<%=form1.ClientID %>
"
).validate();
});
</
script
>
</
body
>
到这边肯定会有人疑问了,为什么要把jQuery.Validate的代码写在页面的<body>中，这点牵扯到验证规则制定和分组验证的方法将会在中级篇和高级篇中讲解。
注册完验证监控后我们就可以开始编写具体的验证代码了，我们通过母版页建立一个子页面，在页面里放几个基本的输入框代码如下：
<%
@ Page Title
=
"
员工信息管理-初级验证
"
Language
=
"
C#
"
MasterPageFile
=
"
~/MasterPage.master
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
Base.aspx.cs
"
Inherits
=
"
_Base
"
%>
<
asp:Content
ID
="Content1"
ContentPlaceHolderID
="head"
runat
="Server"
>
</
asp:Content
>
<
asp:Content
ID
="Content2"
ContentPlaceHolderID
="ContentPlaceHolder1"
runat
="Server"
>
<
table
cellpadding
="1"
cellspacing
="1"
border
="1"
width
="50%"
align
="center"
>
<
tr
>
<
td
>
用户名
</
td
>
<
td
>
<
asp:TextBox
ID
="txtUid"
runat
="server"
CssClass
="required"
></
asp:TextBox
>
</
td
>
</
tr
>
<
tr
>
<
td
>
姓名
</
td
>
<
td
>
<
asp:TextBox
ID
="txtName"
runat
="server"
CssClass
="required"
></
asp:TextBox
>
</
td
>
</
tr
>
<
tr
>
<
td
>
年龄
</
td
>
<
td
>
<
asp:TextBox
ID
="TextBox1"
runat
="server"
CssClass
="number"
></
asp:TextBox
>
</
td
>
</
tr
>
<
tr
>
<
td
>
邮箱
</
td
>
<
td
>
<
asp:TextBox
ID
="TextBox2"
runat
="server"
CssClass
="email"
></
asp:TextBox
>
</
td
>
</
tr
>
<
tr
>
<
td
colspan
="2"
align
="center"
>
<
asp:Button
ID
="Button1"
runat
="server"
Text
="提交"
/>
</
td
>
</
tr
>
</
table
>
</
asp:Content
>
上面的代码中我已经完成了对用户名,姓名,年龄,邮箱的验证了，不知道你发现了没，就是在每个textbox中的class样式，其中required表示必填，number表示必须是数字，email表示必须是电子邮件格式，如果写成required email表示这个字段必须填写同时必须是email格式。
怎么样？是不是相当的简单，省去了拖控件，指定验证控件等啰嗦的代码，仅仅一个【样式名】就搞定了，当然jQuery.Validate还提供许多验证方法，如日期，范围，最大值，最小值，整数，值比较等多种验证方式，同时你还可以自定义验证方式（当然这种自定义验证方式在初级篇不会将到，请期待中级高级篇）。
好了，我们点下提交按钮看下运行的效果：
不错，果然验证成功了，但是有个问题，怎么提示信息全是英文的？
我们查看下jQuery.Validate源代码，在236行果然有提示消息的定义方式，我们就可以进行修改这边的消息改成中文的方式，或者自定义了一个中文的消息jQuery.Validate.message_cn.js，然后使用jQuery.extend来覆盖jQuery.Validate自身的消息，代码如下：
var cnmsg = {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.format("请输入一个最大为 {0} 的值"),
min: jQuery.format("请输入一个最小为 {0} 的值")
};
jQuery.extend(jQuery.validator.messages, cnmsg);
这样只需在母版页里引用下jQuery.Validate.message_cn.js就可以把原有的英文提示给替换掉了，2种方式都是可取的，如果你想把jQuery.Validate改造成适合自己的验证控件就是用第1种方式直接改源代码，如果你只是想用些基本功能不想动原来的源代码就是用第2种方法。
然后我们重新刷新下页面，果然全变成中文了。看下效果：
注意：这边错误提示消息的样式是可以自己定义的，我就修改了原有的样式，加上了个错误图标，更加好看点，样式定义如下：
/* ***********jQuery.Validate插件样式开始******************* */
label.error
{
background : url(images/error.png) no-repeat 0px 0px ;
color : Red ;
padding-left : 20px ;
}
input.error
{
border : dashed 1px red ;
}
/* ***********jQuery.Validate插件样式结束******************* */
</style>
到此，使用jQuery.Validate进行客户端验证的初级篇就写完了，具体的代码大家可以下载下面的源代码查看，敬请期待中级篇和高级篇。
PS：1、代码中jquery.validate.js为官方版本，而jquery.validate1.js为我修改的版本，关于修改的内容在中级篇和高级篇我会讲到。
2、jQuery.Validate仅能做客户端验证，并不能代替服务器端验证，为了系统的安全所以服务器端还是要进行验证的。
源代码下载：点我下载
在上一篇使用jQuery.Validate进行客户端验证（初级篇）中我介绍了为什么选用jQuery.Validate作为客户端的理由，同时也介绍了jQuery.Validate的基本用法以及中文验证消息的修改方法，今天的中级篇我将介绍下jQuery.Validate的一些常见的验证的使用方法。
jQuery.Validate为我们提供了3种验证编写方式，各有优缺点：
1、在input对象中书写class样式指定验证规则或属性验证规则：
如<input type=”text” class=”required”/>
最简单、最便捷，提示消息使用jQuery.Validate的内置的消息（自定义扩展验证规则也属于此项），但是由于是以样式名的方式进行验证，导致了日后修改必须找到相应的input对象，同时无法使用高级验证规则，具体说明请向下看
2、同第1条，这种验证规则方式也是在input对象中书写class样式，只不过书写的方式改为了JSON格式，但是这种方式提供了自定义验证消息的支持：
如<input type=”text” class="{required:true,minlength:5,,messages:{required:'请输入内容'}”/>
简单、方便，但个人认为有点臃肿，还是和第1条一样和相对应的input对象纠缠在一起，并且还增加消息自定义，使得input对象变的更大了，干扰了页面代码的阅读，但可以使用高级验证规则（实际就是将第3种JS以JSON的格式放到具体的class中
3、这种方式使用纯JS的方式：
如：
$().ready(function() {
$("#aspnetform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}})
})
很好的解决了HTML和验证规则的分离，就是书写较为麻烦，需要单独写JS脚本，但好处是可以统一验证规范，将每个页面的验证规则都写在头部的脚本中，方便日后维护。
注意：以上3种验证方式的消息如果未指定都会默认调用内置的消息
在了解了jQuery.Validate为我们提供几种验证方式后，我们来具体分析下每个验证方式：
第一种，在input对象中书写class样式指定验证规则或属性验证规则，可以将该input需要的规则一次性写在里面（具体见页面Middle-1.aspx）。
如:
<asp:TextBox ID="txtAge" runat="server" class="required number" max="99" min="1"></asp:TextBox>
这段代码的意思是必须输入年龄字段，年龄必须是数字，同时必须在0-99范围内，使用起来很方便写几个属性就可以搞定，可以根据需求自由的组合验证规则。
但是就如上面说的许多高级的验证规则无法使用:
range（范围验证，这个就可以替代max,min），
rangeLength（长度范围验证，可以替代maxLength,minLength），
equalTo（比较验证，这个其实可以用，但是如果使用使用的是ASP.NET控件就不行，纯HTML控件可以。
看下代码，我想比较2次输入的密码是否一样时理论上可以这么写：
<asp:TextBox ID="txtRePwd" runat="server" TextMode="Password" CssClass="required" minlength="6" equalTo='#<%=txtPwd.ClientID %>'></asp:TextBox>
但是由于ASP.NET控件的机制问题，会把#<%=txtPwd.ClientID %>进行转译成#<%=txtPwd.ClientID %>这样就导致了要比较的ID无法正确获取，导致验证不成功。
但如果这么写就不会出现问题：
<input type=”password” class=”required” minlenght=”6” equalTo=”txtPwd”/>
）
第二种，同样书写class验证规则，只不过以JSON格式书写，可自定义验证消息，高级验证功能，JS验证规则的简化版（具体见页面Middle-2.aspx）：
这种方式由于要以JSON的格式来编写规则，所以需要引用个单独的JS文件：jquery.metadata.js
具体书写代码格式如下：
<asp:TextBox ID="txtUid" runat="server" CssClass="{required:true,messages:{required:'不输入用户名你怎么登陆?'}}"></asp:TextBox>
<asp:TextBox ID="txtPwd" TextMode="Password" runat="server" CssClass="{required:true,minlength:6,messages:{required:'你不输入密码怎么行呢?',minlength:'密码太短啦至少6位'}}"></asp:TextBox>
具体意思分别是：必须输入用户名和必须输入密码同时长度至少6位。
注意：这边我重新定义了验证信息，这样就不用使用原先在jQuery.Validate中的内置的通用消息，可以指定更加人性化的消息，看下截图（可以对比下内置提示信息和自定义提示信息）：
使用了这种方式后，我们就可以使用第一种验证方式中无法使用的一些验证规则了，如range：
<asp:TextBox ID="txtAge" runat="server" class="{required:true,number:true,range:[1,99],messages:{range:'您的年龄有问题把,得在1-99岁之间哦'}}"></asp:TextBox>
同样我这边也修改了具体具体的消息，而rangelength的用法也与这个类似我就不演示了。
同样很遗憾的，由于ASP.NET控件特性问题equalTo在这也不能使用，HTML还是有效的。
第三种，使用JS进行规则验证，可以使用所有验证规则，并且可以试HTML代码和验证规则很好的分离，方便日后维护（具体代码见Middle-3.aspx）
这种方式需要手写JS来编写验证的规则，具体的格式如下：
01function InitRules() {
02opts = {
03rules:
04{
05<%=txtUid.UniqueID %>:
06{
07required: true
08},
09<%=txtPwd.UniqueID %>:
10{
11required: true,
12minlength: 6
13},
14<%=txtRePwd.UniqueID %>:
15{
16required: true,
17minlength: 6,
18equalTo:"#<%=txtPwd.ClientID %>"
19},
20<%=txtName.UniqueID %>:
21{
22required: true
23},
24<%=txtAge.UniqueID %>:
25{
26required: true,
27number: true,
28range: [1,99]
29},
30<%=txtEmail.UniqueID %>:
31{
32email: true
33}
34},
35messages:
36{
37<%=txtPwd.UniqueID %>:
38{
39required:"不输入用户名你怎么登陆?"
40},
41<%=txtPwd.UniqueID %>:
42{
43required:"你不输入密码怎么行呢?",
44minlength:"密码太短啦至少6位"
45},
46<%=txtAge.UniqueID %>:
47{
48range:"您的年龄有问题把,得在1-99岁之间哦"
49}
50}
51}
52}
这种方式虽然可以使用所有的高级功能，验证规则也分离出来了，但是就是书写起来不简便，所以我的个人建议是如果不是要求很高的情况下，可以将如required，number，email等常规的简单的验证规则使用第1种验证方式，方便、快捷，只有当第1种无法实行的时候才使用这种方式，如equalTo（比较验证），remote（AJAX验证）等，这样相互结合效率是最高的。
到这边可能会有人奇怪了，因为在上面介绍这种JS验证方式的的时候有个小例子，需要把规则放入jQuery.Validate的方法中，否则制定的验证规则是无效的。
这里我就要说明下了，因为，这个例子中我使用的模拟一个项目的形式编写的，页面全部套用母版页，所以为了满足jQuery.Validate拦截form表单的方式，所以我在母版页中的<header>定义了一个变量用来存放每个页面中定义的验证规则：var opts = null;，这样根据HTML从上到下的解析方式首先opts被定义，然后在每个子页面被赋值，最后再返回母版页中的jQuery.Validate初始拦截form方法：
jQuery(document).ready(function() {
if (opts != undefined || opts != null) {
jQuery("#<%=form1.ClientID %>").validate(opts);
} else {
jQuery("#<%=form1.ClientID %>").validate();
}
});如果在子页面里制定了规则，则按规则验证，没有规则则直接验证（这边的opts中包含的规则和具体的class规则不会有冲突，你可以将一部分规则写在opts中（remote，equalTo），另外的规则写在class中（required，number等）
以上就是使用jQuery.Validate进行客户端验证中级篇-上，具体的代码请下载源代码进行查看。
PS：1、本来想把中篇写成一篇的，但是写着写着发现东西实在太多，写在1篇里会太多，所以分成了2篇写，请见谅！
2、下一篇将对jQuery.Validate的使用过程中会碰到的问题进行介绍，如第2种验证方式更改验证规则所处的属性、指定验证信息显示位置等。
源代码下载：点我下载
在上一篇使用jQuery.Validate进行客户端验证（初级篇）中我介绍了为什么选用jQuery.Validate作为客户端的理由，同时也介绍了jQuery.Validate的基本用法以及中文验证消息的修改方法，今天的中级篇我将介绍下jQuery.Validate的一些常见的验证的使用方法。
jQuery.Validate为我们提供了3种验证编写方式，各有优缺点：
1、在input对象中书写class样式指定验证规则或属性验证规则：
如<input type=”text” class=”required”/>
最简单、最便捷，提示消息使用jQuery.Validate的内置的消息（自定义扩展验证规则也属于此项），但是由于是以样式名的方式进行验证，导致了日后修改必须找到相应的input对象，同时无法使用高级验证规则，具体说明请向下看
2、同第1条，这种验证规则方式也是在input对象中书写class样式，只不过书写的方式改为了JSON格式，但是这种方式提供了自定义验证消息的支持：
如<input type=”text” class="{required:true,minlength:5,,messages:{required:'请输入内容'}”/>
简单、方便，但个人认为有点臃肿，还是和第1条一样和相对应的input对象纠缠在一起，并且还增加消息自定义，使得input对象变的更大了，干扰了页面代码的阅读，但可以使用高级验证规则（实际就是将第3种JS以JSON的格式放到具体的class中
3、这种方式使用纯JS的方式：
如：
$().ready(function() {
$("#aspnetform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}})
})
很好的解决了HTML和验证规则的分离，就是书写较为麻烦，需要单独写JS脚本，但好处是可以统一验证规范，将每个页面的验证规则都写在头部的脚本中，方便日后维护。
注意：以上3种验证方式的消息如果未指定都会默认调用内置的消息
在了解了jQuery.Validate为我们提供几种验证方式后，我们来具体分析下每个验证方式：
第一种，在input对象中书写class样式指定验证规则或属性验证规则，可以将该input需要的规则一次性写在里面（具体见页面Middle-1.aspx）。
如:
<asp:TextBox ID="txtAge" runat="server" class="required number" max="99" min="1"></asp:TextBox>
这段代码的意思是必须输入年龄字段，年龄必须是数字，同时必须在0-99范围内，使用起来很方便写几个属性就可以搞定，可以根据需求自由的组合验证规则。
但是就如上面说的许多高级的验证规则无法使用:
range（范围验证，这个就可以替代max,min），
rangeLength（长度范围验证，可以替代maxLength,minLength），
equalTo（比较验证，这个其实可以用，但是如果使用使用的是ASP.NET控件就不行，纯HTML控件可以。
看下代码，我想比较2次输入的密码是否一样时理论上可以这么写：
<asp:TextBox ID="txtRePwd" runat="server" TextMode="Password" CssClass="required" minlength="6" equalTo='#<%=txtPwd.ClientID %>'></asp:TextBox>
但是由于ASP.NET控件的机制问题，会把#<%=txtPwd.ClientID %>进行转译成#<%=txtPwd.ClientID %>这样就导致了要比较的ID无法正确获取，导致验证不成功。
但如果这么写就不会出现问题：
<input type=”password” class=”required” minlenght=”6” equalTo=”txtPwd”/>
）
第二种，同样书写class验证规则，只不过以JSON格式书写，可自定义验证消息，高级验证功能，JS验证规则的简化版（具体见页面Middle-2.aspx）：
这种方式由于要以JSON的格式来编写规则，所以需要引用个单独的JS文件：jquery.metadata.js
具体书写代码格式如下：
<asp:TextBox ID="txtUid" runat="server" CssClass="{required:true,messages:{required:'不输入用户名你怎么登陆?'}}"></asp:TextBox>
<asp:TextBox ID="txtPwd" TextMode="Password" runat="server" CssClass="{required:true,minlength:6,messages:{required:'你不输入密码怎么行呢?',minlength:'密码太短啦至少6位'}}"></asp:TextBox>
具体意思分别是：必须输入用户名和必须输入密码同时长度至少6位。
注意：这边我重新定义了验证信息，这样就不用使用原先在jQuery.Validate中的内置的通用消息，可以指定更加人性化的消息，看下截图（可以对比下内置提示信息和自定义提示信息）：
使用了这种方式后，我们就可以使用第一种验证方式中无法使用的一些验证规则了，如range：
<asp:TextBox ID="txtAge" runat="server" class="{required:true,number:true,range:[1,99],messages:{range:'您的年龄有问题把,得在1-99岁之间哦'}}"></asp:TextBox>
同样我这边也修改了具体具体的消息，而rangelength的用法也与这个类似我就不演示了。
同样很遗憾的，由于ASP.NET控件特性问题equalTo在这也不能使用，HTML还是有效的。
第三种，使用JS进行规则验证，可以使用所有验证规则，并且可以试HTML代码和验证规则很好的分离，方便日后维护（具体代码见Middle-3.aspx）
这种方式需要手写JS来编写验证的规则，具体的格式如下：
01function InitRules() {
02opts = {
03rules:
04{
05<%=txtUid.UniqueID %>:
06{
07required: true
08},
09<%=txtPwd.UniqueID %>:
10{
11required: true,
12minlength: 6
13},
14<%=txtRePwd.UniqueID %>:
15{
16required: true,
17minlength: 6,
18equalTo:"#<%=txtPwd.ClientID %>"
19},
20<%=txtName.UniqueID %>:
21{
22required: true
23},
24<%=txtAge.UniqueID %>:
25{
26required: true,
27number: true,
28range: [1,99]
29},
30<%=txtEmail.UniqueID %>:
31{
32email: true
33}
34},
35messages:
36{
37<%=txtPwd.UniqueID %>:
38{
39required:"不输入用户名你怎么登陆?"
40},
41<%=txtPwd.UniqueID %>:
42{
43required:"你不输入密码怎么行呢?",
44minlength:"密码太短啦至少6位"
45},
46<%=txtAge.UniqueID %>:
47{
48range:"您的年龄有问题把,得在1-99岁之间哦"
49}
50}
51}
52}
这种方式虽然可以使用所有的高级功能，验证规则也分离出来了，但是就是书写起来不简便，所以我的个人建议是如果不是要求很高的情况下，可以将如required，number，email等常规的简单的验证规则使用第1种验证方式，方便、快捷，只有当第1种无法实行的时候才使用这种方式，如equalTo（比较验证），remote（AJAX验证）等，这样相互结合效率是最高的。
到这边可能会有人奇怪了，因为在上面介绍这种JS验证方式的的时候有个小例子，需要把规则放入jQuery.Validate的方法中，否则制定的验证规则是无效的。
这里我就要说明下了，因为，这个例子中我使用的模拟一个项目的形式编写的，页面全部套用母版页，所以为了满足jQuery.Validate拦截form表单的方式，所以我在母版页中的<header>定义了一个变量用来存放每个页面中定义的验证规则：var opts = null;，这样根据HTML从上到下的解析方式首先opts被定义，然后在每个子页面被赋值，最后再返回母版页中的jQuery.Validate初始拦截form方法：
jQuery(document).ready(function() {
if (opts != undefined || opts != null) {
jQuery("#<%=form1.ClientID %>").validate(opts);
} else {
jQuery("#<%=form1.ClientID %>").validate();
}
});如果在子页面里制定了规则，则按规则验证，没有规则则直接验证（这边的opts中包含的规则和具体的class规则不会有冲突，你可以将一部分规则写在opts中（remote，equalTo），另外的规则写在class中（required，number等）
以上就是使用jQuery.Validate进行客户端验证中级篇-上，具体的代码请下载源代码进行查看。
PS：1、本来想把中篇写成一篇的，但是写着写着发现东西实在太多，写在1篇里会太多，所以分成了2篇写，请见谅！
2、下一篇将对jQuery.Validate的使用过程中会碰到的问题进行介绍，如第2种验证方式更改验证规则所处的属性、指定验证信息显示位置等。
源代码下载：点我下载
在上一篇文章使用jQuery.Validate进行客户端验证（中级篇-上）中我介绍了jQuery.Validate的3种验证方式，今天这篇中级-下则是在上一篇的基础上继续介绍jQuery.Validate的一些常用的验证使用方法。
今天主要以使用jQuery.Validate后会遇到的问题为介绍内容，主要介绍以下几点：
1、在使用上一篇中第2种方式，以JSON的格式编写验证规则，影响了正常的class使用，如何处理？
2、在ASP.NET下，所有的按钮都会提交form表单，所以都会引发验证，如何处理？
3、我希望验证的提示信息可以在统一的地方显示，如何处理？
4、我在开发的过程中，我不确定所编写的规则是否正确，如何进行调试？
5、我使用的是微软AJAX控件，想监控dropdownlist是否选择，为何不起作用?
6、radiobox，checkbox，listbox如何进行高级应用？如何指定选择数量？
来看下第1点：在使用上一篇中第2种方式，以JSON的格式编写验证规则，影响了正常的class使用，如何处理？（具体见Middle-4.aspx）
首先看下使用第2种方式是如何编写验证规则的：
<asp:TextBox ID="txtPwd" TextMode="Password" runat="server" CssClass="{required:true,minlength:6,messages:{required:'你不输入密码怎么行呢?',minlength:'密码太短啦至少6位'}}"></asp:TextBox>
可以看到这样写验证规则虽然简单，但是如果我要为这个控件应用其他样式怎么办？所以现在就是处理这个问题的时候了，在页面的头部加上一句代码：
jQuery.metadata.setType("attr", "validate");
由于这种验证规则方式需要依赖jQuery.metadata才可以正常运作，所以我们需要在jQuery.metadata上做文章，分析下jQuery.metadata的代码，可以看到，默认情况下它是检测控件的class属性：
defaults : {
type: 'class',
name: 'metadata',
cre: /({.*})/,
single: 'metadata'
}
那我们可不可以更改这个属性呢？肯定是可以的，就是在页面上加上那句代码，更改其检测的属性。
接着我们还需要修改下页面中的代码，将原来所有的"CssClass”改为我们更改的检测属性"validate”、
这样就很好的更改了验证规则所存放的属性了。
第2点：在ASP.NET下，所有的按钮都会提交form表单，所以都会引发验证，如何处理？（具体见Middle-4.aspx中btnNoValidate按钮）
在实际的开发当中，一个页面上总会有N个按钮，由于ASP.NET的机制特性，所有的控件都会回发页面，也就提交了表单，但是此时整个表单都被jQuery.Validate所监控，所以只要页面中有某个地方不符合验证规则，任何回发页面的操作都会被拦截住，但是实际上我们需要引发验证的按钮只有1或者2个，而其他按钮不需要，这时我们就要想办法了。
其实很简单，就是为不需要引发验证的控件加个样式"cancel"即可，代码如下：
<asp:Button ID="btnNoValidate" runat="server" Text="点我不会引发验证哦" CssClass="cancel" />
怎么样很简单吧？
第3点：我希望验证的提示信息可以在统一的地方显示，如何处理？（具体见Middle-5.aspx）
在开发的过程当中，会有一些特殊的需求，就比如页面上使用了tab页面，而提交按钮就一个，这时就需要将验证提示信息统一放在一个位置，好方便查看，如图：
要实现这个效果只需在JS编写验证规则时添加：
errorPlacement: function(error, element) {
error.html(error.html()+"<br/>");
error.appendTo("#errorContainer");
}
error是一个label对象里面包含了错误消息，element则是验证未通过的对象元素，通过errorPlacement可以方便的将验证提示信息统一放入一个位置。
第4点：我在开发的过程中，我不确定所编写的规则是否正确，如何进行调试？（具体见Middle-5.aspx）
这个就比较简单了，jQuery.Validate默认已经为我们考虑过了，只需在JS编写规则时添加一个属性：
debug:true
这样就表示现在在调试，这时不会提交表单。
第5点：我使用的是微软AJAX控件，想监控dropdownlist是否选择，为何不起作用?（具体见Middle-5.aspx中的性别）
在使用微软AJAX控件中的dropdownlist级联时，比如省市区联动，如果省没有选择，则市和区都是灰的，是disabled状态，是被禁用的，类似代码如下：
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="required" disabled="true">
<asp:ListItem></asp:ListItem>
<asp:ListItem Value="1">男</asp:ListItem>
<asp:ListItem Value="0">女</asp:ListItem>
</asp:DropDownList>
我这边是强制把这个DropDownList禁用了，这时如果为这个控件加上“required”将不会有任何反应，因为在jQuery.Validate代码中默认是不验证的，具体代码见jQuery.Validate.js414行：
not(":submit, :reset, :image, [disabled]")
所以为了方便我们使用，我们修改下代码，将[disabled]"去除，改为：
not(":submit, :reset, :image")
这样再刷新下页面，验证就起作用了。
第6点：radiobox，checkbox，listbox如何进行高级应用？如何指定选择数量？（具体请见radio-checkbox-select-demo.html）
这点我直接引用了官方关于radiobox，checkbox，listbox应用的例子，因为官方的例子已经写的非常好了。
以上就是使用jQuery.Validate进行客户端验证中级篇-下，本文就jQuery.Validate在使用上遇到的问题进行了介绍（都是我在实际项目中碰到的，进行一个总结，难免有遗漏，如果有过jQuery.Validate开发经验的朋友欢迎指点），具体可以下载源代码查看。
PS：中级篇总算写完了，下面就是高级篇的应用了，高级篇主要会讲：如何扩展验证方式，分组验证，AJAX验证，敬请期待！
源代码下载：点我下载
出处： http://kyo-yo.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。