jQuery form插件之formDdata參數(shù)校驗表單及驗證后提交
Form Plugin API 里提供了很多有用的方法可以讓你輕松的處理表單里的數(shù)據(jù)和表單的提交過程。
測試環(huán)境:部署到Tomcat中的web項目。
一、引入依賴js
<script src="jquery-1.3.1.js" type="text/javascript"></script> <script src="jquery.form.js" type="text/javascript"></script>
二、初始化回調(diào)函數(shù)。
首先,我們初始化這個表單,給它一個 beforeSubmit 回調(diào)函數(shù) - 這是一個用來校驗的函數(shù)。
$(document).ready(function() {
$('#myForm').ajaxForm({
target:'#output1', // 用服務(wù)器返回的數(shù)據(jù) 更新 id為output1的內(nèi)容.
beforeSubmit: validate // 提交前,驗證
});
});
三、校驗規(guī)則
function validate(formData, jqForm, options) {
// formdata是數(shù)組對象,每個對象擁有名稱和值.
// 數(shù)據(jù)如下面的格式:
// [
// { name: username , value: usernameValue },
// { name: password , value: passwordValue }
// ]
for (var i=0; i < formData.length; i++) {
if (!formData[i].value) {
alert('用戶名,地址和自我介紹都不能為空!');
return false;
}
}
var queryString = $.param(formData); //組裝數(shù)據(jù)
//alert(queryString); //類似 : name=1&add=2
return true;
}
四、詳細代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery form插件的使用--用 formData 參數(shù)校驗表單</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').ajaxForm({
target: '#output1', // 用服務(wù)器返回的數(shù)據(jù) 更新 id為output1的內(nèi)容.
beforeSubmit: validate // 提交前,驗證
});
});
function validate(formData, jqForm, options) {
// formdata是數(shù)組對象,每個對象擁有名稱和值.
// 數(shù)據(jù)如下面的格式:
// [
// { name: username , value: usernameValue },
// { name: password , value: passwordValue }
// ]
for (var i=0; i < formData.length; i++) {
if (!formData[i].value) {
alert('用戶名,地址和自我介紹都不能為空!');
return false;
}
}
var queryString = $.param(formData); //組裝數(shù)據(jù)
//alert(queryString); //類似 : name=1&add=2
return true;
}
</script>
</head>
<body>
<h3> Demo 5 :jQuery form插件的使用--用 formData 參數(shù)校驗表單,驗證后提交(簡單驗證). </h3>
<form id="myForm" action="ajax2.jsp" method="post">
名稱: <input type="text" name="name" id="name" /> <br/>
地址: <input type="text" name="address" id="address"/><br/>
自我介紹: <textarea name="comment" id="comment" ></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>
</body>
</html>
以上所述是小編給大家分享的jQuery form插件之formDdata參數(shù)校驗表單及驗證后提交的全部內(nèi)容,希望對大家有所幫助。
- jQuery中使用validate插件校驗表單功能
- 基于BootStrap與jQuery.validate實現(xiàn)表單提交校驗功能
- 基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗組件思路詳解
- jQuery form 表單驗證插件(fieldValue)校驗表單
- jQuery Validate表單驗證插件 添加class屬性形式的校驗
- jquery表單驗證使用插件formValidator
- jquery插件bootstrapValidator數(shù)據(jù)驗證詳解
- jQuery formValidator表單驗證插件開源了 含API幫助、源碼、示例
- jQuery表單驗證插件formValidator(改進版)
- jQuery表單校驗插件validator使用方法詳解
相關(guān)文章
DOM操作和jQuery實現(xiàn)選項移動操作的簡單實例
下面小編就為大家?guī)硪黄狣OM操作和jQuery實現(xiàn)選項移動操作的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jquery實現(xiàn)網(wǎng)頁左側(cè)導航菜單欄
這篇文章主要為大家詳細介紹了jquery實現(xiàn)網(wǎng)頁左側(cè)導航菜單欄,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07
基于jquery ui的alert,confirm方案(支持換膚)
這篇文章主要介紹了基于jquery ui的alert,confirm方案(支持換膚),修改自網(wǎng)友的源碼,有需要的小伙伴參考下。2015-04-04
jQuery設(shè)置與獲取HTML,文本和值的簡單實例
本篇文章主要是對jQuery設(shè)置與獲取HTML,文本和值的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02
基于jQuery+Cookie實現(xiàn)的防止刷新的在線考試倒計時
這篇文章主要介紹了基于jQuery+Cookie實現(xiàn)的防止刷新的在線考試倒計時的方法和示例,有需要的小伙伴可以參考下2015-06-06

