使用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 相关文章推荐
JavaScript 图像动画的小demo
May 23 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
python二分法实现实例
2013/11/21 Python
星球大战与Python之间的那些事
2016/01/07 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Python笔记之观察者模式
2019/11/20 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
矫正人员思想汇报
2014/01/08 职场文书
酒店开业策划方案
2014/06/02 职场文书
军训拉歌口号
2014/06/13 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
爱心募捐感谢信
2015/01/22 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python