[jQuery]使用jQuery.Validate进行客户端验证(中级篇-上)
在上一篇使用jQuery.Validate进行客户端验证(初级篇)中我介绍了为什么选用jQuery.Validate作为客户端的理由,同时也介绍了jQuery.Validate的基本用法以及中文验证消息的修改方法,今天的中级篇我将介绍下jQuery.Validate的一些常见的验证的使用方法。
jQuery.Validate为我们提供了3种验证编写方式,各有优缺点:
1、在input对象中书写class样式指定验证规则或属性验证规则:
如<input type=”text” class=”required”/>
最简单、最便捷,提示消息使用jQuery.Validate的内置的消息(自定义扩展验证规则也属于此项),但是由于是以样式名的方式进行验证,导致了日后修改必须找到相应的input对象,同时无法使用高级验证规则,具体说明请向下看
2、同第1条,这种验证规则方式也是在input对象中书写class样式,只不过书写的方式改为了JSON格式,但是这种方式提供了自定义验证消息的支持:
如<input type=”text” runat="server" max="99" min="1"></asp:TextBox>
这段代码的意思是必须输入年龄字段,年龄必须是数字,同时必须在0-99范围内,使用起来很方便写几个属性就可以搞定,可以根据需求自由的组合验证规则。
但是就如上面说的许多高级的验证规则无法使用:
range(范围验证,这个就可以替代max,min),
rangeLength(长度范围验证,可以替代maxLength,minLength),
equalTo(比较验证,这个其实可以用,但是如果使用使用的是ASP.NET控件就不行,纯HTML控件可以。
看下代码,我想比较2次输入的密码是否一样时理论上可以这么写:
<asp:TextBox ID="txtRePwd" runat="server" TextMode="Password" Cssminlength="6" equalTo='#<%=txtPwd.ClientID %>'></asp:TextBox>
但是由于ASP.NET控件的机制问题,会把#<%=txtPwd.ClientID %>进行转译成#<%=txtPwd.ClientID %>这样就导致了要比较的ID无法正确获取,导致验证不成功。
但如果这么写就不会出现问题:
<input type=”password” class=”required” minlenght=”6” equalTo=”txtPwd”/>
)
?
第二种,同样书写class验证规则,只不过以JSON格式书写,可自定义验证消息,高级验证功能,JS验证规则的简化版(具体见页面Middle-2.aspx):
这种方式由于要以JSON的格式来编写规则,所以需要引用个单独的JS文件:jquery.metadata.js
具体书写代码格式如下:
<asp:TextBox ID="txtUid" runat="server" CssTextMode="Password" runat="server" Csssrc="/img/2012/09/24/1056352435.jpg" title="pic20" height="145" alt="[jQuery]运用jQuery.Validate进行客户端验证(中级篇-上)" style="display: block; float: none; margin-left: auto; margin-right: auto; border-width: 0px;">
使用了这种方式后,我们就可以使用第一种验证方式中无法使用的一些验证规则了,如range:
<asp:TextBox ID="txtAge" runat="server"
49
????????????????
}
50
?????????
}
51
????
}
52
}
这种方式虽然可以使用所有的高级功能,验证规则也分离出来了,但是就是书写起来不简便,所以我的个人建议是如果不是要求很高的情况下,可以将如required,number,email等常规的简单的验证规则使用第1种验证方式,方便、快捷,只有当第1种无法实行的时候才使用这种方式,如equalTo(比较验证),remote(AJAX验证)等,这样相互结合效率是最高的。
到这边可能会有人奇怪了,因为在上面介绍这种JS验证方式的的时候有个小例子,需要把规则放入jQuery.Validate的方法中,否则制定的验证规则是无效的。
这里我就要说明下了,因为,这个例子中我使用的模拟一个项目的形式编写的,页面全部套用母版页,所以为了满足jQuery.Validate拦截form表单的方式,所以我在母版页中的<header>定义了一个变量用来存放每个页面中定义的验证规则:var opts = null;,这样根据HTML从上到下的解析方式首先opts被定义,然后在每个子页面被赋值,最后再返回母版页中的jQuery.Validate初始拦截form方法:
jQuery(document).ready(function() {
??? if (opts != undefined || opts != null) {
??????? jQuery("#<%=form1.ClientID %>").validate(opts);
??? } else {
??????? jQuery("#<%=form1.ClientID %>").validate();
??? }
});如果在子页面里制定了规则,则按规则验证,没有规则则直接验证(这边的opts中包含的规则和具体的class规则不会有冲突,你可以将一部分规则写在opts中(remote,equalTo),另外的规则写在class中(required,number等)
?
以上就是使用jQuery.Validate进行客户端验证中级篇-上,具体的代码请下载源代码进行查看。
PS:1、本来想把中篇写成一篇的,但是写着写着发现东西实在太多,写在1篇里会太多,所以分成了2篇写,请见谅!
2、下一篇将对jQuery.Validate的使用过程中会碰到的问题进行介绍,如第2种验证方式更改验证规则所处的属性、指定验证信息显示位置等。