ASPX多服务器控件下使用Jquery.validate.js

Jquery.validate.js是基于JQuery库的一个前端验证控件，功能很强大，自身集成了大多常用的验证方法。非常方便。如下：

//验证
$(function() {
   //文档加载后对表单绑定验证规则。这样当表单submit时，自动进行验证
   $("#aspnetForm").validate({
        rules: {

                        txtAge: {
                                                            required: true,
                                                            number: true,
                                                            min:18
                                                        },
               },
        messages: {
                                txtAge: {
                                                                   required:"必须填写",
                                                                   number:"请输入数字",
                                                                   min:jQuery.format("必须年满{0}.")
                                                            },
                }

        });
   });

其运行的原理是给HTML中的form绑定一些验证方法。在Form提交时自动进行验证，并在验证失败时进行拦截FORM提交。这样的设计思路是正确可行的，可以理解设计人员为何没有将事件以按扭为目标进行绑定。它在关键的地方进行了拦截。这样可以有效的防止多个Submit的情况下。有漏网之鱼！

但做为ASP.NET的开发人员就头痛了。原因是从控件面板上拖动的按扭，最终在页面上全部转换成了submit。而大多情况下每个Submit的业务规则不同。所以特别需要Jquery.validate能够以特定的submit为目标进行验证绑定。但“不幸”的是，我今天鄱遍了官方API都没有找到相关的直接支持！

但还是发现有用价值！Jquery.validate提供了方法删除特定验证。这就好办。我们采用目标按扭使FORM绑定验证，然后再在不相关的SUBMIT绑定一个移除验证方法就行。相关代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Decompress.aspx.cs" Inherits="QsqManage.Decompress" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>演示</title>

<script language="JavaScript" src="/jslib/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="/jslib/jPlug/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
        //绑定表单验证
        function NeedValidate()
        {
            $("#aspnetForm").validate({
                rules: {
                    txtAge: {
                        required:true,
                        number:true,
                        min:18
                    }
                },
                messages:{
                    txtAge: {
                        required:"必须填写",
                        number:"请输入数字",
                        min:jQuery.format("必须年满{0}.")
                    }
                }
            });
        }
        //取消表单验证
        function NoValidate()
        {
            $("#txtAge").rules("remove");//如果有多个依次取消
        }

        $(function() {
            //给需要验证的控件为表单绑定验证
            $("#Button1").click(function(){
                NeedValidate();
            });

            //不需要验证的控件取消验证绑定
            $("#Button2").click(function() {
                NoValidate();
            });
        });
</script>
</head>
<body>
    <form id="aspnetForm" runat="server">
    <div>

    年龄：<asp:TextBox ID="txtAge" runat="server"></asp:TextBox>

        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="需要验证" />
        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="无须验证" />

    </div>

    </form>
</body>
</html>

后台很简单，

        protected void Button1_Click(object sender, EventArgs e)
        {
            Response.Write("验证通过");
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            Response.Write("没有经过验证");
        }

这样，点击Button1就会进行验证，而Button2则直接跳过。

如果一个页面有很多其它按扭，可以使用JQUERY强大的选择器进行批量取消验证功能。如下：

$(document).ready(function() {
    //给需要验证的控件为表单绑定验证
    $("#Button1").click(function() {
        NeedValidate();
    });

    //不需要验证的控件取消验证绑定
    //            $("#Button2").click(function() {
    //                NoValidate();
    //            });

    //批量取消绑定验证对所有 type=submit 并且 name不为Button1的按扭取消表单验证
    $("input[type='submit'][name!='Button1']").click(function() {
        NoValidate();
    });
});

楚旋博客园

posted on 2009-07-12 03:16 冯岩阅读(3782) 评论(3) 编辑收藏举报

刷新页面返回顶部

楚旋

ASPX多服务器控件下使用Jquery.validate.js

导航

公告