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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
JS交换变量的方法
Jan 21 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
js实现文本框选中的方法
May 26 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 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
长波知识介绍
2021/03/01 无线电
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
cookie的secure属性详解
2015/04/08 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
Python sys.argv用法实例
2015/05/28 Python
Python实现二叉堆
2016/02/03 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python微信公众号开发简单流程
2018/03/23 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
详解flask入门模板引擎
2018/07/18 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python getpass实现密文实例详解
2019/09/24 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
《母亲的恩情》教学反思
2014/02/13 职场文书
最美家庭活动方案
2014/08/31 职场文书
毕业生实习证明
2014/09/19 职场文书