[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|1
57|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中默认是不支持的,也是我觉得很不爽的,因为在实际的开发过程中经常会碰到需要分组验证的时候。
出处:博客园
责任编辑:bluehearts
上一页 下一页 使用jQuery.Validate进行客户端验证(后篇) 上 [2]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|