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 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
js实现网页抽奖实例
Aug 05 Javascript
Javascript验证方法大全
Sep 21 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
js逆向解密之网络爬虫
May 30 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
pyqt4教程之widget使用示例分享
2014/03/07 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
详解Python装饰器由浅入深
2016/12/09 Python
python2 与python3的print区别小结
2018/01/16 Python
flask中过滤器的使用详解
2018/08/01 Python
python中pika模块问题的深入探究
2018/10/13 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
物业经理自我鉴定
2014/03/03 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
员工自我工作评价
2015/03/06 职场文书
行政申诉状范文
2015/05/20 职场文书
《称赞》教学反思
2016/02/17 职场文书
倡议书怎么写?
2019/04/11 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python