[jQuery]使用jQuery.Validate进行客户端验证（初级篇）

 以前在做项目的时候就有个很大心病，就是微软的验证控件，虽然微软的验证控件可以帮我们完成大部分的验证，验证也很可靠上手也很容易，但是我就是觉得不爽，主要理由有以下几点：

1、拖控件太麻烦，这个是微软控件的常用方式，你要使用一个控件你得从工具栏中拖到页面里（当然你也可以不拖手写）。

2、必须指定验证对象，验证控件与其他textbox，dropdownlist控件不同的是它是验证其他控件的输入是否有效的，所以必须指定所验证的对象。

3、影响整个页面美观，像一些管理系统总是需要进行大量的用户输入验证，所以就可能导致一个页面上有几十个验证控件严重影响了原来页面里的东西，看起来十分不舒服。

4、ajax验证不方便，现在的系统越来越注重客户的用户体验，所以ajax验证必不可少，但是微软的验证控件并没有提供ajax验证（当然你也可以通过微软的UpdatePanel来进行），需要自己去扩展。

 

说了上面那么多，我只是表明我的意思，微软的验证控件不太好用，所以这时候我就在想有没一些好用点的验证控件呢？

有2个方法：1、自己编写一个（考虑到自己水平还没那么高，想想还是算了）

2、去找一个已经完善的验证控件（这个比较靠谱，毕竟我做不到，别人还是能做到的）

所以按照我的要求：1、不用拖控件

2、不影响页面代码

3、简单的AJAX验证

去网络搜寻找到了2种类型的：1、自己编写的ASP.NET验证控件，虽然封装了比较多的功能但是还是满足不了我需求

2、javascript类型的验证函数库，这个比较靠谱，毕竟js可以和页面代码分离（不影响页面代码），只需要调用函数库里的验证代码就可以进行指定对象的验证了（不用拖控件），同时ajax本质还是要靠javascript来调用（AJAX验证）

所以我根据上面第2条线索就搜索使用javascript编写的验证库——jQuery.Validate，这个验证库是属于jQuery的插件，是由bassistance.de编写的，bassistance.de还提供许多jQuery其他插件，如Accordion，Autocomplete（我的使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进了键盘上下选择体验)就是基于这个autocomplete编写的），Tooltip等等（具体的可以上他们的网站查看）。

决定使用jQuery.Validate首先下载其JS插件:

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

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

<script src='<%= Page.ResolveClientUrl("~/scripts/jquery-1.4.1.js") %>' type="text/javascript"></script>

<script src='<%= Page.ResolveClientUrl("~/scripts/jquery.validate1.js") %>' type="text/javascript"></script>

小技巧：与一般的引用不同，我这边把脚本的路径采用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还提供许多验证方法，如日期，范围，最大值，最小值，整数，值比较等多种验证方式，同时你还可以自定义验证方式（当然这种自定义验证方式在初级篇不会将到，请期待中级高级篇）。

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

pic18

 

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

我们查看下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种方法。

然后我们重新刷新下页面，果然全变成中文了。看下效果：

pic19

注意：这边错误提示消息的样式是可以自己定义的，我就修改了原有的样式，加上了个错误图标，更加好看点，样式定义如下：

复制代码
    <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 @ 2013-11-04 12:06  无恨星晨  阅读(891)  评论(0)  编辑  收藏  举报