Jquery.Form和jquery.validate 的使用

有些功能須要咱們利用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、參數說明

1)BeforeSubmit

BeforeSubmit參數用來在表單提交到Server以前 驗證其數據的合法性，若是提交以前執行的回調函數返回False,表單的提交將會終止。

2)Success

     Success參數表單提交完成以後執行

2、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值

3、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 使用

 

1、使用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 ：指經過驗證後運行的函數，裏面寫入表單要提交的函數，不然表單不會提交

 

2、列出經常使用默認驗證規則

(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

 

3、使用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來決定驗證是否經過

 

4、非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提交完成」)

                 }); 

    }    

}