jquery.validate分组验证代码

 更新时间:2011年03月17日 00:05:55   作者:  
在很多时候,我们都不是一步就将所有信息填写完整,然后提交。而是分步进行填写表单
如下所示:

第一步填写基本信息,

第二步填写教育信息

要求我们每一步操作都要进行验证,这样我们可以用以下方式进行验证:

复制代码 代码如下:

<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>

相关文章

  • JQuery获取与设置HTML元素的内容或文本的实现代码

    JQuery获取与设置HTML元素的内容或文本的实现代码

    使用JQuery可以非常容易地添加、获取和改变某个HTML元素的内容,你会为这种简便感到非常愉悦
    2014-06-06
  • 无法获取隐藏元素宽度和高度的解决方案

    无法获取隐藏元素宽度和高度的解决方案

    本文主要介绍了无法获取隐藏元素(display:none)宽度(width)和高度(height)的解决方案,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • jQuery实现的checkbox级联选择下拉菜单效果示例

    jQuery实现的checkbox级联选择下拉菜单效果示例

    这篇文章主要介绍了jQuery实现的checkbox级联选择下拉菜单效果,涉及jQuery鼠标事件响应及表格table动态操作的相关技巧,需要的朋友可以参考下
    2016-12-12
  • jQuery中on()方法用法实例

    jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能、定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery获取多种input值的简单实现方法

    jQuery获取多种input值的简单实现方法

    下面小编就为大家带来一篇jQuery获取多种input值的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jquery div拖动效果示例代码

    jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过
    2013-12-12
  • jQuery实现类似标签风格的导航菜单效果代码

    jQuery实现类似标签风格的导航菜单效果代码

    这篇文章主要介绍了jQuery实现类似标签风格的导航菜单效果代码,涉及jquery鼠标事件操作页面元素的遍历与样式动态修改技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jquery彩色投票进度条简单实例演示

    jquery彩色投票进度条简单实例演示

    这篇文章向大家推荐了一个jquery彩色投票进度条简单实例演示,详细介绍了如何制作进度条的步骤,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery实现遍历复选框的方法示例

    jQuery实现遍历复选框的方法示例

    这篇文章主要介绍了jQuery实现遍历复选框的方法,结合实例形式分析了jQuery针对表单复选框元素的遍历与字符串操作相关技巧,需要的朋友可以参考下
    2017-03-03
  • jquery 模板的应用示例

    jquery 模板的应用示例

    模板的使用在jqery中还是比较广泛的,在本文有个不错的示例,大家可以参考下
    2013-11-11

最新评论