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

源代码下载：点我下载