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+xml自动生成表格的东西
Dec 21 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
js单例模式详解实例
Nov 21 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 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生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
JS实现省市县三级下拉联动
2020/04/10 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
大学生职业生涯规划书模板
2014/01/03 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书