详解如何使用jquery插件jQuery.Validate实现客户端验证

本文和大家分享一下使用在asp.net项目使用jquery的插件jQuery.Validate实现客户端验证.

jQuery.Validate首先下载其JS插件:

进入http://bassistance.de/jquery-plugins/jquery-plugin-validation/选择DownLoad下载,里面包含了许多示例可供我们学习

接下来我们就开始正式使用了，建立一个基本的网站，建立好一个母版页（这边使用母版页是因为具体的一些项目中都会有一个母版页来存放一些公用的东西，这边为了模拟一个真实的环境，所以建立母版页，如果觉得不需要可以不建立直接建立页面即可），然后把jQuery和jQuery.Validate都引入母版页：

小技巧：与一般的引用不同，我这边把脚本的路径采用Page.ResolveClientUrl进行获取，由于在一些项目开发中，不同模块的代码会分不同的目录来操作，而母版页一半是在网站的根目录所以为了保证所有页面的基本都可以引用到，所以需要将路径进行重新获取（不过这样做也有不好之处就是这样无法在后台的代码中动态为<header>添加东西，编译器会报错，解决办法是在<header>中放入一个literal控件，在后台代码里重新拼字符串赋给literal）。

在引用完基本所需的脚本后就在母版页中添加脚本来进行验证。

jQuery.Validate是监控form，在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则，满足才允许提交。所以需

要在jQuery(document).ready（）时为form进行验证注册

代码:

<body>
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery("#<%=form1.ClientID %>").validate();
        });
    </script>
</body>

到这边肯定会有人疑问了,为什么要把jQuery.Validate的代码写在页面的<body>中，这点牵扯到验证规则制定和分组验证的方法将会在中级篇和高级篇中讲解。

注册完验证监控后我们就可以开始编写具体的验证代码了，我们通过母版页建立一个子页面，在页面里放几个基本的输入框代码如下：

<%@ Page Title="员工信息管理-初级验证" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Base.aspx.cs" Inherits="_Base" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <table cellpadding="1" cellspacing="1" border="1" width="50%" align="center">
        <tr>
            <td>
                用户名
            </td>
            <td>
                <asp:TextBox ID="txtUid" runat="server" CssClass="required"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                姓名
            </td>
            <td>
                <asp:TextBox ID="txtName" runat="server" CssClass="required"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                年龄
            </td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server" CssClass="number"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                邮箱
            </td>
            <td>
                <asp:TextBox ID="TextBox2" runat="server" CssClass="email"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <asp:Button ID="Button1" runat="server" Text="提交" />
            </td>
        </tr>
    </table>
</asp:Content>

上面的代码中我已经完成了对用户名,姓名,年龄,邮箱的验证了，不知道你发现了没，就是在每个textbox中的class样式，其中required表示必填，number表示必须是数字，email表示必须是电子邮件格式，如果写成required email表示这个字段必须填写同时必须是email格式。

怎么样？是不是相当的简单，省去了拖控件，指定验证控件等啰嗦的代码，仅仅一个【样式名】就搞定了，当然jQuery.Validate还提供许多验证方法，如日期，范围，最大值，最小值，整数，值比较等多种验证方式，同时你还可以自定义验证方式（当然这种自定义验证方式在初级篇不会将到，请期待中级高级篇）。

好了，我们点下提交按钮看下运行的效果：

不错，果然验证成功了，但是有个问题，怎么提示信息全是英文的？

我们查看下jQuery.Validate源代码，在236行果然有提示消息的定义方式，我们就可以进行修改这边的消息改成中文的方式，或者自定义了一个中文的消息jQuery.Validate.message_cn.js，然后使用jQuery.extend来覆盖jQuery.Validate自身的消息，代码如下：

//定义中文消息
var cnmsg = {
    required: "必选字段",
    remote: "请修正该字段",
    email: "请输入正确格式的电子邮件",
    url: "请输入合法的网址",
    date: "请输入合法的日期",
    dateISO: "请输入合法的日期 (ISO).",
    number: "请输入合法的数字",
    digits: "只能输入整数",
    creditcard: "请输入合法的信用卡号",
    equalTo: "请再次输入相同的值",
    accept: "请输入拥有合法后缀名的字符串",
    maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
    minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
    rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
    range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
    max: jQuery.format("请输入一个最大为 {0} 的值"),
    min: jQuery.format("请输入一个最小为 {0} 的值")
};
jQuery.extend(jQuery.validator.messages, cnmsg);

这样只需在母版页里引用下jQuery.Validate.message_cn.js就可以把原有的英文提示给替换掉了，2种方式都是可取的，如果你想把jQuery.Validate改造成适合自己的验证控件就是用第1种方式直接改源代码，如果你只是想用些基本功能不想动原来的源代码就是用第2种方法。
然后我们重新刷新下页面，果然全变成中文了。看下效果：

注意：这边错误提示消息的样式是可以自己定义的，我就修改了原有的样式，加上了个错误图标，更加好看点，样式定义如下：
<style type="text/css"> /************jQuery.Validate插件样式开始********************/ label.error { background: url(images/error.png) no-repeat 0px 0px; color: Red; padding-left: 20px; } input.error { border: dashed 1px red; } /************jQuery.Validate插件样式结束********************/ </style>到此，使用jQuery.Validate进行客户端验证的初级篇就写完了，具体的代码大家可以下载下面的源代码查看，敬请期待中级篇和高级篇。
PS：1、代码中jquery.validate.js为官方版本，而jquery.validate1.js为我修改的版本，关于修改的内容在中级篇和高级篇我会讲到。
2、jQuery.Validate仅能做客户端验证，并不能代替服务器端验证，为了系统的安全所以服务器端还是要进行验证的。
源代码下载：点我下载

posted @ 2011-05-10 11:07 Happy Hu Views(1410) Comments(0) Edit 收藏举报

刷新页面返回顶部

胡言乱语

详解如何使用jquery插件jQuery.Validate实现客户端验证

公告