使用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还提供许多验证方法，如日期，范围，最大值，最小值，整数，值比较等多种验证方式，同时你还可以自定义验证方式（当然这种自定义验证方式在初级篇不会将到，请期待中级高级篇）。
好了，我们点下提交按钮看下运行的效果：

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

我们查看下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仅能做客户端验证，并不能代替服务器端验证，为了系统的安全所以服务器端还是要进行验证的。
源代码下载：点我下载

作者：kyo-yo

赞 (0)

相关推荐

  • asp.net MaxLengthValidator 最大长度验证控件代码

    复制代码 代码如下: /// <summary> /// TextBox的最大长度验证器,如果是varchar,char字段类型,需要此验证 /// </summary> [Description("对MaxLength进行验证")] [ToolboxData("<{0}:MaxLengthValidator runat=server></{0}:MaxLengthValidator>")] public class

  • 验证控件与Button的OnClientClick事件详细解析

    一.事件 这是一个长期被我忽略或者是没有发现的问题,问题是这样的: 在一个页面中,当有验证控件的时候,当Button控件触发OnClientClick事件,并且这个事件会返回true和false的时候,验证控件就会失效,不起作用了.具体描述如下: .Net页面如下: 复制代码 代码如下: <form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1"

  • js控制.net验证控件是否可用。

    function validChange() { // Do nothing if client validation is not active if (typeof (Page_Validators) == "undefined") return; if($("rbBotton_0").checked==false) { ValidatorEnable($('<%=RequiredFieldValidator5.ClientID%>'), false

  • ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList

    ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList

    界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadding="3" cellspacing="3&q

  • fileupload控件 文件类型客户端验证实现代码

    无标题页 function CheckFileType() { var objButton=document.getElementById("Button1");//上传按钮 var objFileUpload=document.getElementById('FileUpload1');//FileUpload var objMSG=document.getElementById('msg');//显示提示信息用的DIV var FileName=new String(objFile

  • 教你用AngularJS框架一行JS代码实现控件验证效果

    教你用AngularJS框架一行JS代码实现控件验证效果

    如上图所示,我们需要实现如下这些验证功能: 控件都是必输控件 都需要控制最大长度 第一次打开页面,控件不能显示为错误状态 输入内容再清空后,必输控件需要显示为错误状态 只有所有输入合法后,发布按钮才能变为可用状态 通过AngularJS,我们可以很轻松的实现这些要求,只需要1行JS代码.UI样式这里采用的是Bootstrap.先上示例代码: HTML. <!DOCTYPE html> <html lang="zh-cn" ng-app="ftitApp&qu

  • 基于jquery实现的服务器验证控件的启用和禁用代码

    基于jquery实现的服务器验证控件的启用和禁用代码

    应用背景 1.用户需要填写表单时.2.页面采用服务器验证控件.3.由用户来选择是否填写更多项,更多项的显示与隐藏用Display控制,如下图. 点击"增加服务内容",显示新增表单项,如下图. 点击"取消增加",隐藏新增表单项. 问题:用户点击下一步时,不对Display=none的新增区域表单进行验证,需要在用户点击"取消增加时",禁用服务器验证控件.反之,启用服务器验证控件. 解决方法 还是使用JQuery来搞定吧,主要是太好用了. 1.输出要

  • jQuery密码强度验证控件使用详解

    本文实例为大家分享了jQuery密码强度验证控件,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.12.1.js"></script>

  • jQuery Validate 验证,校验规则写在控件中的具体实例

    将校验规则写到控件中 复制代码 代码如下: <script src="../js/jquery.js" type="text/javascript"></script><script src="../js/jquery.validate.js" type="text/javascript"></script><script src="./js/jquery.met

  • ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList

    ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList

    首先看下界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadding="3" cellspacing="

随机推荐