[jQuery]使用jQuery.Validate进行客户端验证（高级篇-上）——不使用微软验证控件的理由

本篇主要介绍为以下2点：

1、扩展验证规则，jQuery.Validate只提供了一些基本的验证功能，并不能满足我们日常开发的需求，所以我们要为jQuery.Validate扩展验证规则。

2、分组验证，在开发的时候有时会遇到的一个问题就是，不同按钮引发不同的验证。

首先来介绍下第一点：扩展验证规则，在jQuery.Validate默认的验证规则无法满足我们的日常开发需求的时候，我们需要根据自己的业务需求指定一些相应的规则。（具体见MasterPage.master）

为了扩展验证规则，我们首先要看下jQuery.Validate为我们提供的扩展方法：

addMethod: function(name, method, message) {
    $.validator.methods[name] = method;
    $.validator.messages[name] = message;
    if (method.length < 3) {
        $.validator.addClassRules(name, $.validator.normalizeRule(name));
    }
},

这段代码就是用来扩展验证规则的，意思很简单，就是向jQuery.Validate添加验证方法。

接收3个参数：name-验证规则名

                   method-验证规则实现函数（function）

                   message-验证不通过显示的错误消息

当我们调用了这个方法后，我们所写的规则自动就会加入到jQuery.Validate规则中。

好了，我们看下具体如何实现：

手机号码验证：

jQuery.validator.addMethod("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 tel.test(value) || this.optional(element);
}, "请输入正确的手机号码");

这边的method需要注意的是，这个method实现函数接收2个元素：

value：检测的对象的值

element：检测的对象

这边我定义了一个名为“telphoneValid”的验证规则，在验证规则里我首先定义了个手机验证的正则表达式，然后将值放入正则表达式进行验证，返回验证结果，返回的错误消息是“请输入正确的手机号码”。

这样就完成了一个简单的手机号码验证规则扩展。

其实这边也可以把扩展规则放到一个当单独的JS中方便以后重用，但因为这边仅仅是演示，我就把扩展方法放到母版页中了。

注意：我这边的扩展方法是放在jQuery(document).ready()中的，这样可以保证每次页面加载完毕后的时候，自定义的验证规则可以被加载进jQuery.Validate中。

 

接下来说下第2点：分组验证，这个分组验证在默认的jQuery.Validate中默认是不支持的，也是我觉得很不爽的，因为在实际的开发过程中经常会碰到需要分组验证的时候。

这点微软的验证控件就做的很好，在微软的控件里，默认都有ValidationGroup这个属性，只要把属性名设置为相同就可以进行分组验证了，但是jQuery.Validate自身却没提供这个功能，所以我们只能自己扩展了。

来一下具体的场景，在一个页面里有2个tab页面，不同tab页面需要不同的提交按钮：