欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2011年03月17日 00:05:55   作者:  
在很多時(shí)候,我們都不是一步就將所有信息填寫完整,然后提交。而是分步進(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>

相關(guān)文章

最新評論