您的位置: 首页 > 技术文档 > 网页制作 > 使用jQuery.Validate进行客户端验证(中篇)
使用jQuery.Validate进行客户端验证(后篇) 上 回到列表 使用jQuery.Validate进行客户端验证(前篇)
 使用jQuery.Validate进行客户端验证(中篇)

作者:顾磊 时间: 2010-07-07 文档类型:转载 来自:博客园

第 1 页 使用jQuery.Validate进行客户端验证(中篇) [1]
第 2 页 使用jQuery.Validate进行客户端验证(中篇) [2]
第 3 页 使用jQuery.Validate进行客户端验证(中篇) [3]

[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”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 %>进行转译成#&lt;%=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还是有效的。

出处:博客园
责任编辑:bluehearts

上一页 下一页 使用jQuery.Validate进行客户端验证(中篇) [2]

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

作者文章
使用jQuery.Validate进行客户端验证(后篇) 下
使用jQuery.Validate进行客户端验证(后篇) 上
使用jQuery.Validate进行客户端验证(前篇)
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:1/31个记录/页 转到 页 共3个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2