[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都引入母版页：

小技巧：与一般的引用不同，我这边把脚本的路径采用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
出处：http://kyo-yo.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由...相关推荐

[jQuery]使用jQuery.Validate进行客户端验证（高级篇-下）——不使用微软验证控件的理由...
2019独角兽企业重金招聘Python工程师标准>>> 引用源:http://www.cnblogs.com/kyo-yo/archive/2010/07/06/Use-jQuery ...
[jQuery]使用jQuery.Validate进行客户端验证（高级篇-上）——不使用微软验证控件的理由...
在上一篇使用jQuery.Validate进行客户端验证(中级篇-下)中我介绍了jQuery.Validate在日常使用的过程中会遇到哪些问题及解决办法,今天的高级篇则主要是对jQuery.Valid ...
Android:Socket客户端开发，Android 的Socket客户端优化，Android非UI线程修改控件程序崩溃的问题
一.Android:Socket客户端开发创建一个工程我们要做的是按下按键之后,去往服务器 (服务器) 或者我们自己写的服务器 ,给他发送一些预定好的东西然后打开操作界面然后修改一下你要发送 ...
SwiftUI初级课程（二）Text控件的段落和填充属性
struct ContentView: View {var body: some View {VStack {// 设置字间距Text("大江东去,浪淘尽,千古风流人物.").tr ...
Jquery获取服务器端控件ID的方法
<asp:textbox runat="server" id="txtMessage" textmode="SingleLine"&g ...
比Jquery FlexiGrid更好用 dotnetFlexGrid 1.2beta更新-增加展现模板模式(Grid中可以放编辑控件和任意Html内容了）...
为什么80%的码农都做不了架构师?>>> 作者: 华磊发表于 2010-08-19 21:29 原文链接阅读: 126 评论: 0 累,先看效果,前两天提问表格内不能编辑的 ...
Asp.Net就业课之三验证控件
验证控件作用:验证信息是否正确.有效.合理. 一.数据有效性验证方式 1.后台C#代码验证: 信息页面回传,回传到服务器,用户体验不好,服务器压力大.有很多个客户端网页的时候,1000万级别,会 ...
防止自建控件与页面间重复引入客户端js脚本的方法
我们在创建自定义的服务器端控件或是用户控件时,经常需要用到一些客户端js脚本,通常将其作为资源嵌入,并在页面后台代码中添加引用,但是如若用到一些通用的js库(比如JQuery)时,就免不了产生一个疑问 ...
风影ASP.NET基础教学 4 验证控件
前言无论什么应用软件系统,它最本质的功能和用途就是处理数据.这样,数据的安全性就成为了系统设计里面非常重要的话题,提交一些不安全的数据(如SQL注入.数据类型或者数据范围不合适等)常常会导致系统计算 ...
第三章用检验控件执行表单的验证
第三章用检验控件执行表单的检验主要内容: l 使用客户端检验 l 必填域控件:RequiredFieldValidator l 检验表达式控件:RegularExpressionValidator ...

[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由...

[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由...相关推荐

最新文章

热门文章