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 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
js GridView 实现自动计算操作代码
Mar 25 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
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
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
python能自学吗
2020/06/18 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
opencv实现图像几何变换
2021/03/24 Python
物流管理毕业生自荐信
2013/10/24 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
销售辞职报告范文
2014/01/12 职场文书
安全事故检讨书
2014/01/18 职场文书
老人祝寿主持词
2014/03/28 职场文书
股东合作协议书范本
2014/04/14 职场文书
优秀护士演讲稿
2014/04/30 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
物业保安岗位职责
2014/07/02 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书