jquery.validate分組驗(yàn)證代碼

更新時間：2011年03月17日 00:05:55 作者：

在很多時候，我們都不是一步就將所有信息填寫完整，然后提交。而是分步進(jìn)行填寫表單

如下所示：

第一步填寫基本信息，

第二步填寫教育信息

要求我們每一步操作都要進(jìn)行驗(yàn)證，這樣我們可以用以下方式進(jìn)行驗(yàn)證：

復(fù)制代碼代碼如下:

 
<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> 
畢業(yè)學(xué)校：<input type="text" id="school" class="required" /> 
</td> 
</tr> 
<tr> 
<td> 
專業(yè)：<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> 