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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
详解webpack模块加载器兼打包工具
Sep 11 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
vue实现表格合并功能
Dec 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投票程序源码
2007/03/11 PHP
PHP PDO函数库详解
2010/04/27 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
用javascript实现画板的代码
2007/09/05 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
再谈javascript原型继承
2014/11/10 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python画图的函数用法以及技巧
2019/06/28 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
android面试问题与答案
2016/12/27 面试题
CLR与IL分别是什么含义
2016/08/23 面试题
翻译专业应届生求职信
2013/11/23 职场文书
电大本科自我鉴定
2014/02/05 职场文书
办公室副主任职责范本
2014/03/08 职场文书
黄金搭档广告词
2014/03/21 职场文书
小学生家长寄语
2014/04/02 职场文书
银行业务授权委托书
2014/10/10 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书