jQuery.Validate客户端验证使用介绍

在日常项目中表单验证算是最常见的了，使用一个好的js库可以使我们的工作事半功倍。jQuery.Validate无疑就是一个不错的选择。

jQuery.Validate，这个验证库是属于jQuery的插件，是由bassistance.de编写的，bassistance.de还提供许多jQuery的其他插件，这里就不一一介绍了，大家可以到其官网查看都是很不错的。

下面为大家提供jQuery.Validate的下载地址：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

这里有很详尽的说明和文档。

好废话不多说直接上干货.

要使用jQuery.Validate首先我们要在也页面中引用jQuery，然后引用下载好的 jquery.validate.js 文件。如何大家需要提示验证提示消息采用默认的中文的话，还需要引用 messages_cn.js 文件。

文件引入完毕之后，我们就需要开始编码了，jQuery.Validate是监控form表单的，在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则，满足才允许提交。所以需要在jQuery(document).ready（）时为form进行验证注册代码如下：

1 <script type="text/javascript"> 
2 jQuery(document).ready(function() { 
3 jQuery("#<%=form1.ClientID %>").validate(); 
4 }); 
5 </script>

 

接下来我们要为表单元素设置规则：

格式是　rules: {　表单元素name名：{ 规则 }　　}

 

自定义错误提示消息是通过 messages 来设置的：

格式是　　 messages: { rules中的出现的表单元素name名：{ 对应规则名：显示消息} }

简单例子如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="Scripts/messages_cn.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#form1").validate({
                rules: {
                    name: {
                        required: true
                    },
                    password: {
                        required: true
                    },
                    confirm_password: {
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    date: { required: true,
                        date: true
                    },
                    url: { required: true,
                        url: true
                    },
                    number: { required: true,
                        number: true
                    }
                },

                messages: {
                    url: {
                        url: "url错误"
                    }
                }
            });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    name<asp:TextBox ID="name" runat="server"></asp:TextBox><br />
    password<asp:TextBox ID="password" runat="server"></asp:TextBox><br />
    confirm_password<asp:TextBox ID="confirm_password" runat="server"></asp:TextBox><br />
    email<asp:TextBox ID="email" runat="server"></asp:TextBox><br />
    date<asp:TextBox ID="date" runat="server"></asp:TextBox><br />
    url<asp:TextBox ID="url" runat="server"></asp:TextBox><br />
    number<asp:TextBox ID="number" runat="server"></asp:TextBox><br />
    <asp:Button ID="Button1" runat="server" Text="Button" />

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

 

上面演示了基本的验证设置，除此之外我们还需要远程的验证。

为此我们将上面的实例完善，在name字段中添加远程验证：

 1  name: {
 2                         required: true,
 3                         remote: {
 4                             url: "remote.ashx",
 5                             type: "post",
 6                             data: {
 7                                 name: function () {
 8                                     return $("#name").val();
 9                                 }
10                             },
11                             dataType: "html",
12                             dataFilter: function (data) {
13                                 data = data.toLowerCase()
14                                 if (data == "true") {
15                                     return true;
16                                 }
17                                 else {
18                                     return false;
19                                 }
20                             }
21                         }

 

此时我们需要在服务器端进行配合，在此以asp.net为例演示：

创建一个ashx，一般处理程序，

 1  public void ProcessRequest(HttpContext context)
 2         {
 3             context.Response.ContentType = "text/html";
 4             string name = context.Request["name"];
 5             if (!string.IsNullOrWhiteSpace(name))
 6             {
 7                 if (name.Trim() == "wang")
 8                     context.Response.Write(true);
 9             }
10 
11         }

 

自此我们的远程验证就完成了。

此处只是做了一个基本介绍，由于时间还有很多没有介绍的大家可以参看下载的文档或Demos。

如有什么不对的地方还请大家拍砖.

 

 

 

posted @ 2012-09-16 21:46  WangWilliam  阅读(854)  评论(0)  编辑  收藏  举报