使用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 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python中对列表排序实例
2015/01/04 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python命令 -u参数用法解析
2019/10/24 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
python 实现多维数组转向量
2019/11/30 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
初中班主任寄语
2014/04/04 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
商务英语专业求职信
2014/06/26 职场文书
个人四风问题整改措施
2014/10/24 职场文书
给客户的检讨书
2014/12/21 职场文书
商场营业员岗位职责
2015/04/14 职场文书
用人单位聘用意向书
2015/05/11 职场文书