[jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由...
在上一篇使用jQuery.Validate进行客户端验证(中级篇-下)中我介绍了jQuery.Validate在日常使用的过程中会遇到哪些问题及解决办法,今天的高级篇则主要是对jQuery.Validate的一些高级应用进行介绍。
本篇主要介绍为以下2点:
1、扩展验证规则,jQuery.Validate只提供了一些基本的验证功能,并不能满足我们日常开发的需求,所以我们要为jQuery.Validate扩展验证规则。
2、分组验证,在开发的时候有时会遇到的一个问题就是,不同按钮引发不同的验证。
首先来介绍下第一点:扩展验证规则,在jQuery.Validate默认的验证规则无法满足我们的日常开发需求的时候,我们需要根据自己的业务需求指定一些相应的规则。(具体见MasterPage.master)
为了扩展验证规则,我们首先要看下jQuery.Validate为我们提供的扩展方法:
addMethod: function(name, method, message) {
$.validator.methods[name] = method;
$.validator.messages[name] = message;
if (method.length < 3) {
$.validator.addClassRules(name, $.validator.normalizeRule(name));
}
},
这段代码就是用来扩展验证规则的,意思很简单,就是向jQuery.Validate添加验证方法。
接收3个参数:name-验证规则名
method-验证规则实现函数(function)
message-验证不通过显示的错误消息
当我们调用了这个方法后,我们所写的规则自动就会加入到jQuery.Validate规则中。
好了,我们看下具体如何实现:
手机号码验证:
jQuery.validator.addMethod("telphoneValid", function(value, element) {
var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|157|158|159|180|187|188|189)\d{8}$/;
return tel.test(value) || this.optional(element);
}, "请输入正确的手机号码");
这边的method需要注意的是,这个method实现函数接收2个元素:
value:检测的对象的值
element:检测的对象
这边我定义了一个名为“telphoneValid”的验证规则,在验证规则里我首先定义了个手机验证的正则表达式,然后将值放入正则表达式进行验证,返回验证结果,返回的错误消息是“请输入正确的手机号码”。
这样就完成了一个简单的手机号码验证规则扩展。
其实这边也可以把扩展规则放到一个当单独的JS中方便以后重用,但因为这边仅仅是演示,我就把扩展方法放到母版页中了。
注意:我这边的扩展方法是放在jQuery(document).ready()中的,这样可以保证每次页面加载完毕后的时候,自定义的验证规则可以被加载进jQuery.Validate中。
接下来说下第2点:分组验证,这个分组验证在默认的jQuery.Validate中默认是不支持的,也是我觉得很不爽的,因为在实际的开发过程中经常会碰到需要分组验证的时候。
这点微软的验证控件就做的很好,在微软的控件里,默认都有ValidationGroup这个属性,只要把属性名设置为相同就可以进行分组验证了,但是jQuery.Validate自身却没提供这个功能,所以我们只能自己扩展了。
来一下具体的场景,在一个页面里有2个tab页面,不同tab页面需要不同的提交按钮:
这2个就是标准的分组验证情况,如果不设置分组验证的情况下,点击[基本信息提交]和[描述提交]按钮后页面上所有的验证都会被相应,这是因为2个 按钮都在一个form表单中,2个按钮的点击事件默认都是在客户端提交表单,然后由服务器端来分配执行代码,所以问题就出现了。
这时我们就需要引入分组验证了,这个解决思路是我在一个国外的网站找到的,不过具体地址我找不到了,这个方法有个弊端就是必须是将需要分组的控件必须放入不同的容器中,如div,table等,因为采用的是标识class样式来进行分组验证。
看下具体代码:
01
|
//初始化分组验证
|
02
|
function InitValidationGroup() {
|
03
|
$('.validationGroup .causesValidation').click(Validate);
|
04
|
05
|
$('.validationGroup :text').keydown(function(evt) {
|
06
|
if (evt.keyCode == 13) {
|
07
|
var $nextInput = $(this).nextAll(':input:first');
|
08
|
09
|
if ($nextInput.is(':submit')) {
|
10
|
Validate(evt);
|
11
|
}
|
12
|
else {
|
13
|
evt.preventDefault();
|
14
|
$nextInput.focus();
|
15
|
}
|
16
|
}
|
17
|
});
|
18
|
}
|
19
|
function Validate(evt) {
|
20
|
var $group = $(this).parents('.validationGroup');
|
21
|
var isValid = true;
|
22
|
$group.find(':input').each(function(i, item) {
|
23
|
if (!$(item).valid())
|
24
|
isValid = false;
|
25
|
});
|
26
|
if (!isValid)
|
27
|
evt.preventDefault();
|
28
|
}
|
上面的代码就是用来进行分组验证的初始化的,这段代码会找寻页面中标有validationGroup样式的元素(分组的容器),然后在这个元素中找带causesValidation样式的元素(这个元素是引发验证的按钮),
上面代码实现分组验证的逻辑就是当带causesValidation样式的元素引发验证后会找寻这个元素的父级validationGroup元素,然后遍历validationGroup元素下的所有有验证规则的元素判断是否验证通过。
页面代码:
01
|
< div id = "tabs" >
|
02
|
< ul >
|
03
|
< li >< a href = "#baseinfo" >基本信息</ a ></ li >
|
04
|
< li >< a href = "#personaldesc" >个人描述</ a ></ li >
|
05
|
</ ul >
|
06
|
< div id = "baseinfo" class = "validationGroup" >
|
07
|
< table cellpadding = "1" cellspacing = "1" border = "1" width = "50%" align = "center" >
|
08
|
< tr >
|
09
|
< td >
|
10
|
用户名
|
11
|
</ td >
|
12
|
< td >
|
13
|
< asp:TextBox ID = "txtUid" runat = "server" ></ asp:TextBox >
|
14
|
</ td >
|
15
|
</ tr >
|
16
|
< tr >
|
17
|
< td >
|
18
|
密码
|
19
|
</ td >
|
20
|
< td >
|
21
|
< asp:TextBox ID = "txtPwd" ValidationGroup = "" TextMode = "Password" runat = "server" ></ asp:Text
|
22
|
</td>
|
23
|
</ tr >
|
24
|
< tr >
|
25
|
< td >
|
26
|
确认密码
|
27
|
</ td >
|
28
|
< td >
|
29
|
< asp:TextBox ID = "txtRePwd" TextMode = "Password" runat = "server" ></ asp:TextBox >
|
30
|
</ td >
|
31
|
</ tr >
|
32
|
< tr >
|
33
|
< td >
|
34
|
姓名
|
35
|
</ td >
|
36
|
< td >
|
37
|
< asp:TextBox ID = "txtName" runat = "server" ></ asp:TextBox >
|
38
|
</ td >
|
39
|
</ tr >
|
40
|
< tr >
|
41
|
< td >
|
42
|
年龄
|
43
|
</ td >
|
44
|
< td >
|
45
|
< asp:TextBox ID = "txtAge" runat = "server" ></ asp:TextBox >
|
46
|
</ td >
|
47
|
</ tr >
|
48
|
< tr >
|
49
|
< td >
|
50
|
性别
|
51
|
</ td >
|
52
|
< td >
|
53
|
< asp:DropDownList ID = "DropDownList1" runat = "server" CssClass = "required" disabled = "true" >
|
54
|
< asp:ListItem ></ asp:ListItem >
|
55
|
< asp:ListItem Value = "1" >男</ asp:ListItem >
|
56
|
< asp:ListItem Value = "0" >女</ asp:ListItem >
|
57
|
</ asp:DropDownList >
|
58
|
</ td >
|
59
|
</ tr >
|
60
|
< tr >
|
61
|
< td >
|
62
|
邮箱
|
63
|
</ td >
|
64
|
< td >
|
65
|
< asp:TextBox ID = "txtEmail" runat = "server" ></ asp:TextBox >
|
66
|
</ td >
|
67
|
</ tr >
|
68
|
< tr >
|
69
|
< td colspan = "2" >
|
70
|
< asp:Button ID = "Button3" runat = "server" Text = "基本信息提交" CssClass = "causesValidation" />
|
71
|
</ td >
|
72
|
</ tr >
|
73
|
</ table >
|
74
|
</ div >
|
75
|
< div id = "personaldesc" class = "validationGroup" >
|
76
|
< p >
|
77
|
< asp:TextBox ID = "txtDescription" runat = "server" TextMode = "MultiLine" Width = "500px"
|
78
|
Height = "100px" ></ asp:TextBox >
|
79
|
</ p >
|
80
|
< asp:Button ID = "Button1" runat = "server" Text = "描述提交" CssClass = "causesValidation" />
|
81
|
</ div >
|
82
|
</ div >
|
83
|
84
|
< script type = "text/javascript" >
|
85
|
InitRules();
|
86
|
isValidationGroup = true;
|
87
|
</ script >
|
分析下代码为2个tab页面都加上validationGroup样式,引发验证的按钮加上causesValidation样式,同时还需要标记一个isValidationGroup = true; 表示页面需要进行分组验证,传递回母版页。
注意:这边的逻辑和手写JS验证规则是一个逻辑,在母版页建立一个isValidationGroup属性默认为false,只有当页面需要进行分组验证则设为true。
接下来看下母版页的的jQuery(document).ready()中的带代码:
01
|
if (isValidationGroup) {
|
02
|
if (opts != undefined || opts != null) {
|
03
|
jQuery("#<%=form1.ClientId %>").validate(jQuery.extend(opts, { onsubmit: false }));
|
04
|
} else {
|
05
|
jQuery("#<%=form1.ClientId %>").validate({
|
06
|
onsubmit: false
|
07
|
});
|
08
|
}
|
09
|
InitValidationGroup();
|
10
|
} else {
|
11
|
if (opts != undefined || opts != null) {
|
12
|
jQuery("#<%=form1.ClientId %>").validate(opts);
|
13
|
} else {
|
14
|
jQuery("#<%=form1.ClientId %>").validate();
|
15
|
}
|
16
|
}
|
判断isValidationGroup是否需要进行分组验证,同时如果isValidationGroup为true,需要加入onsubmit:false,否则分组验证将无法有效。
到此,jQuery.Validate进行客户端验证(高级篇-上)到此就讲完了,本文主要介绍了如何自定义扩展验证规则和分组验证,欢迎大家指点。
PS:在jQuery.Validate进行客户端验证(高级篇-下)将为主要介绍如何使用jQuery.Validate进行ajax验证,AJAX验证的封装及简单扩展,敬请期待!
源代码下载:点我下载
转载于:https://www.cnblogs.com/yongheng178/archive/2010/11/27/1889505.html
[jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由...相关推荐
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由...
2019独角兽企业重金招聘Python工程师标准>>> 引用源:http://www.cnblogs.com/kyo-yo/archive/2010/07/06/Use-jQuery ...
- 【建议收藏】2020年中高级Android大厂面试秘籍,为你保驾护航金三银四,直通大厂(Android高级篇上)...
前言 成为一名优秀的Android开发,需要一份完备的知识体系,在这里,让我们一起成长为自己所想的那样~. A awesome android expert interview questions a ...
- 谷粒商城高级篇上(未完待续)
谷粒商城高级篇(上)保姆级整理 之前整理了基础篇,Typora提示将近20000词,谷粒商城基础篇保姆级整理 在学高级篇的时候,不知不觉又整理了两万多词,做了一阶段,先发出来,剩余部分整理好了再发.自 ...
- 可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK...
LEADTOOLS Video Streaming Module控件为您创建一个自定义的视频会议应用程序和工具提供所有需要的功能.软件开发人员可以使用Video Streaming Module SD ...
- Android ActionBar高级自定义——设置标题居中和添加控件
转载地址:http://blog.csdn.net/gtbluesky/article/details/44656567 关于ActionBar的一些常见使用方法我已经在之前两篇博文(Android ...
- 【鲁班学院】面试总结:Java高级篇(上):集合的类型以及重新认识HashMap
1.你用过哪些集合类? 大公司最喜欢问的Java集合类面试题 40个Java集合面试问题和答案 java.util.Collections 是一个包装类.它包含有各种有关集合操作的静态多态方法. ja ...
- [转载]WebForm下使用 jQuery.loadUserControl异步load用户控件
现在做网站都追求用户体验,那么ajax自然就必不可少.如果您用过Asp.Net MVC ,你会发现Asp.Net MVC 和jQuery 配合的非常默契(事实上jQuery已经成了微软的御用脚本库了) ...
- Jquery中对常用控件赋值的方法
场景 通过Jquery进行ajax请求数据后将返回的数据给页面中的 控件进行赋值. 实现 1.对input进行赋值$("#id").val("赋值");2.对l ...
- Silverlight4控件纯客户端注册验证
本文实现了一个实验性的Silverlight控件纯客户端注册验证机制.希望做过这方面的朋友多给些指导性意见. 先给大家介绍一下Silverlight客户端控件的使用情景.一般来说,Silverligh ...
最新文章
- 读后感和机翻《人类因果迁移:深度强化学习的挑战》
- 更新不了_一个作者在起点中文网写小说,半年更新38万字,还是没签约成功
- ubuntu nginx php7,ubuntu 16 安装php7+nginx
- java 读取split_Java报错系列——split
- Node简单服务器开发
- java frame清除控件_java – 清除JFrame的组件并添加新组件
- 转录组+微生物组联合解密困扰50年的丛枝菌根共生“自我调节”中枢分子网络机制...
- AD20如何用图片做丝印的图案,丝印层导入logo
- 全国行政区划代码表(天地图)
- 【稀饭】react native 实战系列教程之热更新原理分析与实现
- 微信小程序前端推送消息通知 -- 需要获取用户订阅权限
- netkeeper客户端_中国电信创翼客户端下载
- Python实现点击选择验证码破解
- 实现西门子S71200/1500与三菱FX系列PLC通讯
- 川土微电子CA-IS1300用于电流检测的隔离运放新品上市
- python安装cv2模块的方法_Python opencv模块cv2安装和部分函数使用
- 俞敏洪一分钟励志演讲
- 网页播放的本地视频代码
- Android 自定义View 一行显示不下换行显示
- 一次开发中并发删除插入死锁分析记录
热门文章
- 利用DelayQueue与Delayed 完成异步延时操作
- 海客谈瀛洲,烟涛微茫信难求——微信
- VUE与UE5 像素流送
- 使用Stream流, 获取所有的“张”姓学员和“宋”姓学员, 并把获取到的信息存储到新集合中. 然后遍历集合并打印
- python差分法_数值偏微分方程-差分法(Python)
- 使用Docker安装Gitlab,Jenkins,Tomcat搭建流水线项目环境,实现DevOps自动化步骤,很详细
- 毛戈平美妆“气蕴东方·宋风雅韵”新品发布传奇再续!
- C语言,给定字符串,切分输出
- 学习和使用程序捕捉异常 CrashHandler以及ACRA
- 动态临时变量为 Azure DevOps Pipeline 变量自定义锦上添花