在上一篇使用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”class="{required:true,minlength:5,,messages:{required:'请输入内容'}”/>
简单、方便,但个人认为有点臃肿,还是和第1条一样和相对应的input对象纠缠在一起,并且还增加消息自定义,使得input对象变的更大了,干扰了页面代码的阅读,但可以使用高级验证规则(实际就是将第3种JS以JSON的格式放到具体的class中
3、这种方式使用纯JS的方式:
如:
$().ready(function() {
$("#aspnetform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
})
})
很好的解决了HTML和验证规则的分离,就是书写较为麻烦,需要单独写JS脚本,但好处是可以统一验证规范,将每个页面的验证规则都写在头部的脚本中,方便日后维护。
注意:以上3种验证方式的消息如果未指定都会默认调用内置的消息
在了解了jQuery.Validate为我们提供几种验证方式后,我们来具体分析下每个验证方式:
第一种,在input对象中书写class样式指定验证规则或属性验证规则,可以将该input需要的规则一次性写在里面(具体见页面Middle-1.aspx)。
如:
<asp:TextBox ID="txtAge" runat="server" class="required number" 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" CssClass="required" minlength="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" CssClass="{required:true,messages:{required:'不输入用户名你怎么登陆?'}}"></asp:TextBox>
<asp:TextBox ID="txtPwd" TextMode="Password" runat="server"
CssClass="{required:true,minlength:6,messages:{required:'你不输入
密码怎么行呢?',minlength:'密码太短啦至少6位'}}"></asp:TextBox>
具体意思分别是:必须输入用户名和必须输入密码同时长度至少6位。
注意:这边我重新定义了验证信息,这样就不用使用原先在jQuery.Validate中的内置的通用消息,可以指定更加人性化的消息,看下截图(可以对比下内置提示信息和自定义提示信息):
使用了这种方式后,我们就可以使用第一种验证方式中无法使用的一些验证规则了,如range:
<asp:TextBox ID="txtAge" runat="server" class="{required:true,number:true,range:[1,99],messages:{range:'您的年龄有问题 把,得在1-99岁之间哦'}}"></asp:TextBox>
样我这边也修改了具体具体的消息,而rangelength的用法也与这个类似我就不演示了。
同样很遗憾的,由于ASP.NET控件特性问题equalTo在这也不能使用,HTML还是有效的。