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,alert出现乱码问题的解决方法
Jun 19 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
JavaScript 参考教程
2006/12/29 Javascript
Track Image Loading效果代码分析
2007/08/13 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python图像处理之反色实现方法
2015/05/30 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Pycharm更换python解释器的方法
2018/10/29 Python
python可视化实现代码
2019/01/15 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
仓管员岗位职责
2015/02/03 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
HDFS免重启挂载新磁盘
2022/04/06 Servers
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL