(转)jquery.validate分组验证

最新推荐文章于 2022-07-30 11:41:44 发布

jackyrongvip

最新推荐文章于 2022-07-30 11:41:44 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax/web相关文章标签： jquery ViewUI

本文链接：https://blog.youkuaiyun.com/jackyrongvip/article/details/83977060

ajax/web相关专栏收录该内容

409 篇文章

订阅专栏

本文介绍了一种在表单填写过程中实现分步验证的方法，通过使用jQuery库，确保用户在提交信息前完成每一步的正确填写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.cnblogs.com/wangjq/archive/2011/03/13/1983024.html

在很多时候，我们都不是一步就将所有信息填写完整，然后提交。而是分步进行填写表单，如下所示：

第一步填写基本信息，

第二步填写教育信息

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

view sourceprint?<script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js"></script>

<script type="text/javascript" language="javascript" src="http://www.cnblogs.com/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>