jquery.validate分组验证代码


Posted in Javascript onMarch 17, 2011

如下所示:

第一步填写基本信息,

jquery.validate分组验证代码

第二步填写教育信息

jquery.validate分组验证代码

要求我们每一步操作都要进行验证,这样我们可以用以下方式进行验证:

<script type="text/javascript" language="javascript" src="/Scripts/jquery-1.4.1.min.js"></script> 
<script type="text/javascript" language="javascript" src="/Scripts/jquery.validate.min.js"></script> 
<h2> 
ValidateStep</h2> 
<form action="" id="registerForm" method="post"> 
<div class="step1 validationGroup" style="display: block;"> 
<p> 
基本情况</p> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td> 
姓名:<input type="text" id="name" class="required" /> 
</td> 
</tr> 
<tr> 
<td> 
年龄:<input type="text" id="age" class="required number" /> 
</td> 
</tr> 
<tr> 
<td> 
<input type="button" class="next" value="下一步" /> 
</td> 
</tr> 
</table> 
</div> 
<div class="step2 validationGroup" style="display: none"> 
<p> 
教育背景</p> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td> 
毕业学校:<input type="text" id="school" class="required" /> 
</td> 
</tr> 
<tr> 
<td> 
专业:<input type="text" id="major" class="required" /> 
</td> 
</tr> 
<tr> 
<td> 
<input type="submit" value="提交" /> 
</td> 
</tr> 
</table> 
</div> 
</form> 
<script language="javascript" type="text/javascript"> 
function InitValidationGroup() { 
$('.validationGroup .next').click(function (evt) { 
if (IsValidated($(this).closest(".validationGroup"))) { 
$(".step1").hide(); 
$(".step2").show(); 
} 
else { 
evt.preventDefault(); 
} 
}); 
$('.step1 :text').keydown(function (evt) { 
if (evt.keyCode == 13) { 
var $nextInput = $(this).nextAll(':input:first'); 
if ($nextInput.is(':submit')) { 
Validate(evt); 
} 
else { 
evt.preventDefault(); 
$nextInput.focus(); 
} 
} 
}); 
} 
function IsValidated(group) { 
var isValid = true; 
group.find(':input').each(function (i, item) { 
if (!$(item).valid()) 
isValid = false; 
}); 
return isValid; 
} 
$(document).ready(function () { 
InitValidationGroup(); 
var validator = $("#registerForm").validate(); 
}); 
</script>
Javascript 相关文章推荐
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 #Javascript
jQuery版Tab标签切换
Mar 16 #Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 #Javascript
jquery radio 操作代码
Mar 16 #Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 #Javascript
初识JQuery 实例一(first)
Mar 16 #Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 #Javascript
You might like
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP微信分享开发详解
2017/01/14 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
JavaScript Prototype对象
2009/01/07 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
过滤器的用法
2013/10/08 面试题
应聘医药代表职位求职信
2013/10/21 职场文书
人事部岗位职责范本
2014/03/05 职场文书
节能宣传周活动总结
2014/05/08 职场文书
美术社团活动总结
2014/06/27 职场文书
思想作风建设心得体会
2014/10/22 职场文书
营运督导岗位职责
2015/04/10 职场文书
水电施工员岗位职责
2015/04/11 职场文书
交通事故起诉书
2015/05/19 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
PyTorch中permute的使用方法
2022/04/26 Python