jQuery form插件之formDdata參數校驗表單及驗證後提交_jquery

Form Plugin API 裡提供了許多有用的方法可以讓你輕鬆的處理表單裡的資料和表單的提交流程。

測試環境：部署到Tomcat中的web專案。

一、引入依賴js

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>

二、初始化回呼函數。

首先，我們初始化這個表單，給它一個 beforeSubmit 回呼函數 - 這是一個用來校驗的函數。

$(document).ready(function() { 
$('#myForm').ajaxForm({ 
target:'#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前，验证
}); 
});

三、校驗規則

function validate(formData, jqForm, options) { 
// formdata是数组对象,每个对象拥有名称和值.
// 数据如下面的格式：
// [ 
// { 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); //组装数据
//alert(queryString); //类似 ： name=1&add=2 
return true; 
}

四、詳細程式碼：

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
 


 Demo 5 :jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）. 
 
名称：  

地址： 
 
自我介绍：  

 

以上所述是小編給大家分享的jQuery form插件之formDdata參數校驗表單及驗證後提交的全部內容，希望對大家有所幫助。