[jQuery]使用jQuery.Validate进行客户端验证（中级篇-上）

[jQuery]使用jQuery.Validate进行客户端验证（中级篇-下）

?在上一篇文章使用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" Cssrunat="server" Text="点我不会引发验证哦" Css/>

怎么样很简单吧？

?

第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" Cssdisabled="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验证，敬请期待！

源代码下载：点我下载