有些功能需要我們利用Ajax技術進行POST提交表單，這時候就需要用到jquery.Form ,它有兩種方式進行提交，AjaxForm和AjaxSubmit方式。
AjaxForm 方式必須先綁定表單，它一般在$(document).ready(function () {}里定義，它能讓表單不刷新頁面的情況下POST到目標。
如：
$(document).ready(function () {
$("#UpdateForm").ajaxForm(function(){
Alert(“AjaxForm提交完成”)
});
}
AjaxSubmit方式是以相應事件來通過Ajax方式提交表單，比如單擊某個按鈕觸發該表單的提交
如：
$(“#btnTest”).click(function(){
$("#UpdateForm").AjaxSubmit (function(){
Alert(“AjaxForm提交完成”)
});
})
一、參數說明
1)BeforeSubmit
BeforeSubmit參數用來在表單提交到Server之前 驗證其數據的合法性，如果提交之前執行的回調函數返回False,表單的提交將會終止。
2)Success
Success參數表單提交完成之后執行
二、API接口說明
1) FormSerialize
將表單序列化成查詢串。這個方法將返回一個形如： name1=value1&name2=value2的字符串。
如：
var queryString = $('# myFormId).formSerialize();
等效於var queryString = $.param(formData)方法
這兩個方法返回的值是相同的
2) fieldSerialize
將表單里的元素序列化成字符串。當你只需要將表單的部分元素序列化時可以用到這個方法。 這個方法將返回一個形如： name1=value1&name2=value2的字符串。
var queryString = $('#myFormId .specialFields').fieldSerialize();
specialFields是該元素的Class值
3) fieldValue
取出所有匹配要求的域的值，以數組形式返回。 從 0.91 版本開始, 這個方法 始終 返回一個數組。 如果沒有符合條件的域，這個數組將會是個空數組，否則它將會包含至少一個值。
var value = $('# myFormId':password').fieldValue();
alert('The password is: ' + value[0]);
4) resetForm
通過調用表單元素的內在的DOM 上的方法把表單重置成最初的狀態。
$('#myFormId').resetForm();
5) clearForm
清空表單所有元素的值。這個方法將會清空所有的文本框，密碼框，文本域里的值，去掉下拉列表所有被選中的項，讓所有復選框和單選框里被選中的項不再選中。
$('#myFormId').clearForm();
6) clearFields
清空某個表單域的值。這個可以用在只需要清空表單里部分元素的值的情況。
$('#myFormId .specialFields').clearFields();
specialFields是該元素的Class值
三、Server端返回格式處理
1)Json格式
在設置返回Json格式時，要設置Option中DataType格式如下
dataType: 'json',
JS驗證成功到Server端代碼：
if (ModelState.IsValid)
{
return Json(new { a = "a", b = "b" });
}
Form提交完成之后success方法將被執行，responseText 和 responseXML 的值會被傳進這個參數 (這個要依賴於dataType的類型)
success: function (responseText, statusText, xhr, $form) {
alert(responseText.a);
}
2)XML格式
在設置返回XML格式時，要設置Option中DataType格式如下
dataType: 'xml',
JS驗證成功到Server端代碼：
//返回一個XML類型
string xmlString = "<?xml version=\"1.0\" encoding=\"gb2312\" ?><tree id=\"0\"><item text=\"北京歡迎你\"/></tree>";
return this.Content(xmlString, "text/xml");
Form提交完成之后success方法將被執行
success: function (responseText, statusText, xhr, $form) {
alert(xhr.responseText)
}
3)HTML格式
在設置返回HTML格式時，要設置Option中DataType格式如下
dataType: ‘HTML’,
JS驗證成功到Server端代碼：
string htmlString = "<div style=\"background:red\">Test<div>";
return Content(htmlString);
Form提交完成之后success方法將被執行
success: function (responseText, statusText, xhr, $form) {
alert(responseText)
}
jquery.validate 使用
一、使用Jquery.Validate進行驗證方法
$(document).ready(function () {
$("#pageForm").validate({
rules: {
DictKey: { required: true, maxlength: 10 },
DictContent: { required: true, maxlength: 10 }
},
messages: {
DictKey: { required: "不能為空", maxlength: jQuery.format("不能超過{0}個字符") },
DictContent: { required: "不能為空", maxlength: jQuery.format("不能超過{0}個字符") }
},
submitHandler: function (form) {
form.submit();
}
})
})
DictKey ，DictContent：指需要驗證的控件ID
submitHandler ：指通過驗證后運行的函數，里面寫入表單要提交的函數，否則表單不會提交
二、列出常用默認驗證規則
(1)required:true 必輸字段
(2)email:true 必須輸入正確格式的電子郵件
(3)url:true 必須輸入正確格式的網址
(4)date:true 必須輸入正確格式的日期
(5)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(6)number:true 必須輸入合法的數字(負數，小數)
(7)digits:true 必須輸入整數
(8)creditcard: 必須輸入合法的信用卡號
(9)equalTo:"#field" 輸入值必須和#field相同
(10)accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴）
(11)maxlength:5 輸入長度最多是5的字符串(漢字算一個字符)
(12)minlength:10 輸入長度最小是10的字符串(漢字算一個字符)
(13)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符)
(14) equalLength:10 輸入長度必須是10
(14)range:[5,10] 輸入值必須介於 5 和 10 之間
(15)max:5 輸入值不能大於5
(16)min:10 輸入值不能小於10
三、使用ajax方法驗證輸入值是否存在
當文本框輸入值時，或改變輸入值時會自動到Server去驗證輸入值是否在數據庫中存在
JS代碼如下：
DictKey: { required: true, maxlength: 10,
remote: { //驗證用戶名是否存在
type: "POST",
url: '@Url.Content("~/Account/Test/")' //servlet
}
},
DictKey: { required: "不能為空", maxlength: jQuery.format("不能超過{0}個字符"),remote:"用戶名已被注冊"},
Server端：
[HttpPost]
public JsonResult Test(string DictKey) //DictKey即要驗證控件的ID值
{
bool result;
if (DictKey == "a")
{
result = true;
}
else
{
result = false;
}
return Json(result);
}
根據Server端返回的True,False來決定驗證是否通過
四、非submit按鈕結合Jquery.Form進行提交
如果不是submit提交按鈕，比如單擊某個按鈕觸發表單驗證，這時表單驗證可用如下方式
function validateForm() {
//validate方法參數可選
return $("#form1").validate({
rules: {
},
messages:{
}
}).form();
}
function doSubmit(){
//do other things
//驗證通過后提交
if(validateForm()){
form.submit()
//這邊可以結合Jquery.Form進行AjaxSubmit方式異步提交
$("#UpdateForm").AjaxSubmit (function(){
Alert(“AjaxForm提交完成”)
});
}
}