zoukankan      html  css  js  c++  java
  • [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验证,敬请期待!

    源代码下载:点我下载

  • 相关阅读:
    cf B. Sereja and Suffixes
    cf E. Dima and Magic Guitar
    cf D. Dima and Trap Graph
    cf C. Dima and Salad
    最短路径问题(floyd)
    Drainage Ditches(网络流(EK算法))
    图结构练习—BFSDFS—判断可达性(BFS)
    Sorting It All Out(拓扑排序)
    Power Network(最大流(EK算法))
    Labeling Balls(拓扑)
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/2270192.html
Copyright © 2011-2022 走看看