使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由


Posted in Javascript onJune 28, 2010

主要理由有以下几点:

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格式。
怎么样?是不是相当的简单,省去了拖控件,指定验证控件等??碌拇?耄?鼋鲆桓觥狙?矫?烤透愣?耍?比?Query.Validate还提供许多验证方法,如日期,范围,最大值,最小值,整数,值比较等多种验证方式,同时你还可以自定义验证方式(当然这种自定义验证方式在初级篇不会将到,请期待中级高级篇)。
好了,我们点下提交按钮看下运行的效果:
使用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种方法。

然后我们重新刷新下页面,果然全变成中文了。看下效果:
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
注意:这边错误提示消息的样式是可以自己定义的,我就修改了原有的样式,加上了个错误图标,更加好看点,样式定义如下:

<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

Javascript 相关文章推荐
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
javascript几个易错点记录
Nov 26 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 #Javascript
Jquery ui css framework
Jun 28 #Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 #Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 #Javascript
js getElementsByTagName的简写方式
Jun 27 #Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 #Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 #Javascript
You might like
PHP中的加密功能
2006/10/09 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
JS实现购物车特效
2017/02/02 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
python避免死锁方法实例分析
2015/06/04 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python中six模块基础用法
2019/12/08 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
.NET常见笔试题集
2012/12/01 面试题
元旦活动感言
2014/03/08 职场文书
环保建议书300字
2014/05/14 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
2015年幼师工作总结
2015/04/28 职场文书
道歉信范文
2015/05/12 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
Mysql开启外网访问
2022/05/15 MySQL