开发者社区> zting科技> 正文

[jQuery]使用jQuery.Validate进行客户端验证(中级篇-下)——不使用微软验证控件的理由

简介:
+关注继续查看

   在上一篇文章使用jQuery.Validate进行客户端验证(中级篇-上)中我介绍了jQuery.Validate的3种验证方式,今天这篇中级-下则是在上一篇的基础上继续介绍jQuery.Validate的一些常用的验证使用方法。

今天主要以使用jQuery.Validate后会遇到的问题为介绍内容,主要介绍以下几点:

1、在使用上一篇中第2种方式,以JSON的格式编写验证规则,影响了正常的class使用,如何处理?

2、在ASP.NET下,所有的按钮都会提交form表单,所以都会引发验证,如何处理?

3、我希望验证的提示信息可以在统一的地方显示,如何处理?

4、我在开发的过程中,我不确定所编写的规则是否正确,如何进行调试?

5、我使用的是微软AJAX控件,想监控dropdownlist是否选择,为何不起作用?

6、radiobox,checkbox,listbox如何进行高级应用?如何指定选择数量?

 

 

来看下第1点:在使用上一篇中第2种方式,以JSON的格式编写验证规则,影响了正常的class使用,如何处理?具体见Middle-4.aspx

首先看下使用第2种方式是如何编写验证规则的:

<asp:TextBox ID="txtPwd" TextMode="Password" runat="server" CssClass="{required:true,minlength:6,messages:{required:'你不输入密码怎么行呢?',minlength:'密码太短啦至少6位'}}"></asp:TextBox>

可以看到这样写验证规则虽然简单,但是如果我要为这个控件应用其他样式怎么办?所以现在就是处理这个问题的时候了,在页面的头部加上一句代码:

jQuery.metadata.setType("attr", "validate");

由于这种验证规则方式需要依赖jQuery.metadata才可以正常运作,所以我们需要在jQuery.metadata上做文章,分析下jQuery.metadata的代码,可以看到,默认情况下它是检测控件的class属性:

defaults : { 
            type: 'class', 
            name: 'metadata', 
            cre: /({.*})/, 
            single: 'metadata' 
        }

那我们可不可以更改这个属性呢?肯定是可以的,就是在页面上加上那句代码,更改其检测的属性。

接着我们还需要修改下页面中的代码,将原来所有的"CssClass”改为我们更改的检测属性"validate”、

这样就很好的更改了验证规则所存放的属性了。

 

第2点:在ASP.NET下,所有的按钮都会提交form表单,所以都会引发验证,如何处理?(具体见Middle-4.aspx中btnNoValidate按钮

在实际的开发当中,一个页面上总会有N个按钮,由于ASP.NET的机制特性,所有的控件都会回发页面,也就提交了表单,但是此时整个表单都被jQuery.Validate所监控,所以只要页面中有某个地方不符合验证规则,任何回发页面的操作都会被拦截住,但是实际上我们需要引发验证的按钮只有1或者2个,而其他按钮不需要,这时我们就要想办法了。

其实很简单,就是为不需要引发验证的控件加个样式"cancel"即可,代码如下:

<asp:Button ID="btnNoValidate" runat="server" Text="点我不会引发验证哦" CssClass="cancel" />

怎么样很简单吧?

 

第3点:我希望验证的提示信息可以在统一的地方显示,如何处理?(具体见Middle-5.aspx

在开发的过程当中,会有一些特殊的需求,就比如页面上使用了tab页面,而提交按钮就一个,这时就需要将验证提示信息统一放在一个位置,好方便查看,如图:

pic21

要实现这个效果只需在JS编写验证规则时添加:

errorPlacement: function(error, element) { 
                       error.html(error.html()+"<br/>"); 
                       error.appendTo("#errorContainer"); 
               }

error是一个label对象里面包含了错误消息,element则是验证未通过的对象元素,通过errorPlacement可以方便的将验证提示信息统一放入一个位置。

 

第4点:我在开发的过程中,我不确定所编写的规则是否正确,如何进行调试?(具体见Middle-5.aspx

这个就比较简单了,jQuery.Validate默认已经为我们考虑过了,只需在JS编写规则时添加一个属性:

debug:true

这样就表示现在在调试,这时不会提交表单。

 

第5点:我使用的是微软AJAX控件,想监控dropdownlist是否选择,为何不起作用?(具体见Middle-5.aspx中的性别

在使用微软AJAX控件中的dropdownlist级联时,比如省市区联动,如果省没有选择,则市和区都是灰的,是disabled状态,是被禁用的,类似代码如下:

<asp:DropDownList ID="DropDownList1" runat="server" CssClass="required" disabled="true"> 
    <asp:ListItem></asp:ListItem> 
    <asp:ListItem Value="1">男</asp:ListItem> 
    <asp:ListItem Value="0">女</asp:ListItem> 
</asp:DropDownList>

我这边是强制把这个DropDownList禁用了,这时如果为这个控件加上“required”将不会有任何反应,因为在jQuery.Validate代码中默认是不验证的,具体代码见jQuery.Validate.js414行:

not(":submit, :reset, :image, [disabled]")

所以为了方便我们使用,我们修改下代码,将[disabled]"去除,改为:

not(":submit, :reset, :image")

这样再刷新下页面,验证就起作用了。

 

第6点:radiobox,checkbox,listbox如何进行高级应用?如何指定选择数量?(具体请见radio-checkbox-select-demo.html

这点我直接引用了官方关于radiobox,checkbox,listbox应用的例子,因为官方的例子已经写的非常好了。

 

以上就是使用jQuery.Validate进行客户端验证中级篇-下,本文就jQuery.Validate在使用上遇到的问题进行了介绍(都是我在实际项目中碰到的,进行一个总结,难免有遗漏,如果有过jQuery.Validate开发经验的朋友欢迎指点),具体可以下载源代码查看。

PS:中级篇总算写完了,下面就是高级篇的应用了,高级篇主要会讲:如何扩展验证方式,分组验证,AJAX验证,敬请期待!

源代码下载:点我下载



本文转自kyo-yo博客园博客,原文链接:http://www.cnblogs.com/kyo-yo/archive/2010/07/01/Use-jQuery-Validate-To-Being-Client-Validate-Middle-2.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
下拉菜单;手风琴;九宫格的Jquery的使用实例
下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单 效果如图: 下拉.gif 代码如下: 下拉菜单 li{ width: 80px; ...
1003 0
使用jquery-easyui写的CRUD插件(1)
写插件先看看jqeury的插件如何写,先了解一下如何写插件的代码。 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。
895 0
实用技巧:使用 jQuery 异步加载 JavaScript 脚本
  JavaScript 加载器在 Web 开发中是非常强大和有用的工具。目前流行的几个加载器,像 curljs、LABjs 和 RequireJS 使用都很广泛。他们功能强大的,但有些情况下可以有更简单的方案。
896 0
35 个高级但使用简单的 jQuery 插件
Subway Map Visualization jQuery Plugin Download | Demo jquery-toastmessage-plugin Download | Demo Gmap Google Maps Plugin for jQuery Download | Demo Recurly.
869 0
【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码
jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置。 很多jQuery的使用者都对这一问题深感疑惑。
886 0
+关注
3550
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载