jQuery validate 分组验证（转）

首先声明一下，这个标题是不准确的，不准确的原因是，查了很多资料也没发现validate验证框架是支持分组验证，当然也看了部分他的源码，如果哪位知道它支持分组验证功能，请不吝赐教。

      分组验证的应用场景是这样的：一张表单中有多于一个的提交按钮，也就是说不只一个提交按钮，例如，点“按钮1”我可以验证文“本框1”、“文本框2”是否 符合验证规则，点击“按钮2”我可能去验证这张表单其它元素是否符合验证规则，公司同事原来找了一个可以分组验证的东东，只要在表单元素上加一个额外的 “GroupName='Info'”当然=后面你可填任何的字符，这样多个具有相同"GroupName"的表单元素就分到了一组，从而实现分组验证的 功能。暂切不讨论分组验证到底有没必要，或者分组验证在某些应用场景下是必须的（我实在想不起来在什么情景下是必须的）。今天项目组的人给我提出了分组验 证的问题，表面上是分组验证，但实际中的问题却是：当点击一些不是向后台提交数据的按钮时，总是触发jQuery验证框架的验证。可能是用过分组验证的缘 故，他想到用分组验证，说白了就是点击没有验证必要的按钮时，给它分到一个空组里面，什么都不验证，当时我就蒙了，虽然这样有点绕，不过能解决问题也可以 一试。大家应该都知道，Web Form项目下的任意一个服务端按钮，生成客户端代码都会是type=submit的按钮，也就是说，只要点击服务端的按钮都会POST给服务器，想想这 也挺变态啊。这里只要解决点击某个铵钮不触发jQuery验证框架验证就可以，还好，jQuery验证框架提供一个机制，就是设置服务器端按钮的 cssclass="cancel"就可以了（客户端设置class="cancel"）

<asp:Button ID="Button1" cssclass="cancel" runat="server" Text="非提交按钮">

这样这个按钮就不会触发jq的验证了。

      以下是我在解决问题过程中发现的jQuery validate验证框架的一些特性，希望对您有所帮助。（如果您对此很了解，可略过以下内容）

      1、required非空验证只有在第一次提交后才会被激活生效，对于设置了非空验证的表单元素，初始页面后不会有任何提示，只有点击提交按钮时才会去击活并验证，如日期，整数等其它验证则在失去焦点后激活。

   2、$.validator.setDefaults（）设置的参数，在$("#Form").validate()为某个表单注册验证之前才会有效，放在之后无效。

   3、对于用$("#元素ID").rules("add", { required: true });增加的验证规则可以用

$("#元素ID").rules("remove", "required");移除，但是注册到元素中的则不行，例如：

<asp:TextBox id="TxtAge" CssClass="{required:true}" ……/> TxtAge的验证规则无法移除。

 

       但还是发现有用价值！Jquery.validate提供了方法删除特定验证。这就好办。我们采用目标按扭使FORM绑定验证，然后再在不相关的SUBMIT绑定一个移除验证方法就行。相关代码如下：     

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/loveyou128144/archive/2009/09/23/4585687.aspx

 

 痛了。原因是从控件面板上拖动的按扭，最终在页面上全部转换成了submit。而大多情况下每个Submit的业务规则不同。所以特别需要 Jquery.validate能够以特定的submit为目标进行验证绑定。但“不幸”的是，我今天鄱遍了官方API都没有找到相关的直接支持

 

 

 

 

<% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " Decompress.aspx.cs " Inherits = " QsqManage.Decompress " %> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head runat ="server" >      < title > 演示 </ title >      < script language ="JavaScript" src ="/jslib/jquery-1.3.2.min.js" type ="text/javascript" ></ script >    < script language ="JavaScript" src ="/jslib/jPlug/jquery.validate.min.js" type ="text/javascript" ></ script > < script type ="text/javascript" >                 // 绑定表单验证          function NeedValidate()          {              $( " #aspnetForm " ).validate({                  rules: {                      txtAge: {                          required: true ,                          number: true ,                          min: 18                      }                  },                  messages:{                      txtAge: {                          required: " 必须填写 " ,                          number: " 请输入数字 " ,                          min:jQuery.format( " 必须年满{0}. " )                      }                  }              });          }          // 取消表单验证          function NoValidate()          {              $( " #txtAge " ).rules( " remove " ); // 如果有多个 依次取消                      }                   $( function () {              // 给需要验证的控件为表单绑定验证              $( " #Button1 " ).click( function (){                              NeedValidate();              });                           // 不需要验证的控件 取消验证绑定              $( " #Button2 " ).click( function () {                  NoValidate();              });          }); </ script > </ head > < body >      < form id ="aspnetForm" runat ="server" >      < div >           年龄： < asp:TextBox ID ="txtAge" runat ="server" ></ asp:TextBox >                   < asp:Button ID ="Button1" runat ="server" onclick ="Button1_Click" Text ="需要验证" />                   < asp:Button ID ="Button2" runat ="server" onclick ="Button2_Click" Text ="无须验证" />           </ div >           </ form > </ body > </ html > 后台很简单，          protected void Button1_Click( object sender, EventArgs e)          {              Response.Write( " 验证通过 " );          }          protected void Button2_Click( object sender, EventArgs e)          {              Response.Write( " 没有经过验证 " );          } 这样，点击Button1就会进行验证，而Button2则直接跳过。 如果一个页面有很多其它按扭，可以使用JQUERY强大的选择器进行批量取消验证功能。如下： $(document).ready( function () {      // 给需要验证的控件为表单绑定验证      $( " #Button1 " ).click( function () {          NeedValidate();      });      // 不需要验证的控件 取消验证绑定      //              $("#Button2").click(function() {      //                  NoValidate();      //              });           // 批量取消绑定验证 对所有 type=submit 并且 name不为Button1的按扭取消表单验证      $( " input[type='submit'][name!='Button1'] " ).click( function () {          NoValidate();      }); }); 贴个简单的例子： $('#EditView' ).validate({              event: "keyup" ,              rules:{                  name:{required:true }, cosa_commodity_group_list:{required:true } },              submitHandler:function (){                  $("#group_list > option" ).attr("selected" ,"selected" );                  $(this ).submit();              } }); 1.event 是触发校验的方式，可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不使用这个参数时就只在按提交按钮时触发 2.如果在提交前还需要进行一些自定义处理使用submitHandler 参数，其它的都比较简单，自己看看API就成了. 3.debug ，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便. 4.rules ，所有的检验规则都写在这个参数里面 格式为：        ID : {rule1,rule2,...}        (1) required: true         必输           (2) number: true 只能输入数字(包括小数)           (3) digits:true 只能输入整数           (4) minValue: 3 不能小于3           (5) maxValue: 100 最大不超过100           (6) rangeValue:[50,100] 值范围为50-100           (7) minLength: 5 最小长度(汉字算一个字符)           (8) maxLength:        10 最大长度(汉字算一个字符)           (9) rangeLength:[5,10] 长度范围为5至10位(汉字算一个字符)           (10) 上面的minLength, maxLength, rangeLength 这三项除了text input之外还可以用于checkbox,select这两种控件           (11) email:true 电子邮件           (12) equalTo: "#field" 与#field值相同           (13) dateISO:true       日期型，格式为1998/01/22         1999-12-12 5.messages ，自定义错误信息，格式与rules类似