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从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
js编写简单的计时器功能
Jul 15 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
JavaScript随机数的组合问题案例分析
May 16 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中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python 接收处理外带的参数方法
2018/12/03 Python
python如何编写win程序
2020/06/08 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
python实现无边框进度条的实例代码
2020/12/30 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
Java里面如何创建一个内部类的实例
2015/01/19 面试题
护理自我鉴定范文
2013/10/06 职场文书
新闻专业推荐信范文
2013/11/20 职场文书
事业单位辞职信范文
2014/01/19 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
法制报告会主持词
2014/04/02 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python