jquery.validate分組驗(yàn)證代碼
更新時(shí)間:2011年03月17日 00:05:55 作者:
在很多時(shí)候,我們都不是一步就將所有信息填寫完整,然后提交。而是分步進(jìn)行填寫表單
如下所示:
<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>
第一步填寫基本信息,
第二步填寫教育信息
要求我們每一步操作都要進(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>
您可能感興趣的文章:
- jquery validate.js表單驗(yàn)證的基本用法入門
- jQuery.Validate 使用筆記(jQuery Validation范例 )
- jquery.validate使用攻略 第五步 正則驗(yàn)證
- jQuery validate 中文API 附validate.js中文api手冊
- jQuery EasyUI API 中文文檔 - ValidateBox驗(yàn)證框
- jQuery.Validate驗(yàn)證庫的使用介紹
- jquery內(nèi)置驗(yàn)證(validate)使用方法示例(表單驗(yàn)證)
- jquery validate添加自定義驗(yàn)證規(guī)則(驗(yàn)證郵箱 郵政編碼)
- jquery validate 自定義驗(yàn)證方法介紹 日期驗(yàn)證
- 使用jquery.validate自定義方法實(shí)現(xiàn)"手機(jī)號碼或者固話至少填寫一個(gè)"的邏輯驗(yàn)證
- jQuery驗(yàn)證插件 Validate詳解
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- jquery.validate使用時(shí)遇到的問題
- jQuery Validate初步體驗(yàn)(一)
相關(guān)文章
JQuery獲取與設(shè)置HTML元素的內(nèi)容或文本的實(shí)現(xiàn)代碼
使用JQuery可以非常容易地添加、獲取和改變某個(gè)HTML元素的內(nèi)容,你會(huì)為這種簡便感到非常愉悅2014-06-06jQuery實(shí)現(xiàn)的checkbox級聯(lián)選擇下拉菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的checkbox級聯(lián)選擇下拉菜單效果,涉及jQuery鼠標(biāo)事件響應(yīng)及表格table動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12jQuery獲取多種input值的簡單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query獲取多種input值的簡單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06jQuery實(shí)現(xiàn)類似標(biāo)簽風(fēng)格的導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)類似標(biāo)簽風(fēng)格的導(dǎo)航菜單效果代碼,涉及jquery鼠標(biāo)事件操作頁面元素的遍歷與樣式動(dòng)態(tài)修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)遍歷復(fù)選框的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)遍歷復(fù)選框的方法,結(jié)合實(shí)例形式分析了jQuery針對表單復(fù)選框元素的遍歷與字符串操作相關(guān)技巧,需要的朋友可以參考下2017-03-03