[jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)

在上一篇使用jQuery.Validate进行客户端验证(中级篇-下)中我介绍了jQuery.Validate在日常使用的过程中会遇到哪些问题及解决办法,今天的高级篇则主要是对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页面需要不同的提交按钮:

pic22

pic23

 

这2个就是标准的分组验证情况,如果不设置分组验证的情况下,点击[基本信息提交]和[描述提交]按钮后页面上所有的验证都会被相应,这是因为2个 按钮都在一个form表单中,2个按钮的点击事件默认都是在客户端提交表单,然后由服务器端来分配执行代码,所以问题就出现了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwwsg.html