使用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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
可以将word转成html的js代码
Apr 11 Javascript
Javascript 面向对象之重载
May 04 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
移动端js触摸事件详解
Sep 18 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
vue 自定义组件的写法与用法详解
Mar 04 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
node内置调试方法总结
2018/02/22 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
利用Python如何生成便签图片详解
2018/07/09 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
学生评语大全
2014/04/18 职场文书
广播体操口号
2014/06/18 职场文书
感恩教育主题班会
2015/08/12 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
python如何为list实现find方法
2022/05/30 Python