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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
ES5和ES6中类的区别总结
Dec 21 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
基于Django的python验证码(实例讲解)
2017/10/23 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python 动态加载的实现方法
2017/12/22 Python
Python多线程扫描端口代码示例
2018/02/09 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python http基本验证方法
2018/12/26 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
求职信格式范本
2013/11/15 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
大学新生入学教育方案
2014/05/16 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python