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 日期时间函数(经典+完善+实用)
May 27 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
js中对象与对象创建方法的各种方法
Feb 27 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中变量及部分适用方法
2008/03/27 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
WAF的正确bypass
2017/01/05 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
详解Bootstrap插件
2016/04/25 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
vue+iview写个弹框的示例代码
2017/12/05 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
python内存管理分析
2015/04/08 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python简单实现刷新智联简历
2016/03/30 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
搬家公司的创业计划书
2014/01/01 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
党员群众路线承诺书
2014/05/20 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
学生个人总结范文
2015/02/15 职场文书
法律进社区活动总结
2015/05/07 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
法人代表资格证明书
2015/06/18 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript