jquery表單插件form使用方法詳解

更新時(shí)間：2017年01月20日 09:51:34 作者：BaldWinf

這篇文章主要為大家詳細(xì)介紹了jquery插表單件form使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

傳統(tǒng)的表單提交，都是頁面跳轉(zhuǎn)的形式，但是現(xiàn)在更流行ajax提交，那么如果希望有表單提交的簡(jiǎn)便，也有ajax的效果，有什么解決辦法嗎？

怎么使用

兩種使用方式：

第一種方式

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/jquery-form.js"></script>
  <script>
   // 使用ajaxForm
   $(function(){
    $("#myForm").ajaxForm(function(){
     $("#output1").html("提交成功").show();
    })
   })
  </script>
 </head>
 <body>
  <form id="myForm">
   <input type="text" name="username">
   <input type="text" name="password">
   <input type="submit" value="提交">
   <div id="output1" style="display: none"></div>
  </form>
 </body>
 </html>

第二種方式

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/jquery-form.js"></script>
  <script>
   $(function(){
    //方式二 與方式一效果一樣
    $("#myForm").submit(function(){
     // 使用ajaxSubmit
     $(this).ajaxSubmit(function(){
      $("#output1").html("提交成功").show();
     });
     return false;
    })
   })
  </script>
 </head>
 <body>
  <form id="myForm">
   <input type="text" name="username">
   <input type="text" name="password">
   <input type="submit" value="提交">
   <div id="output1" style="display: none"></div>
  </form>
 </body>
 </html>

感覺上第一種要更方便一點(diǎn)。
其中的參數(shù)function()是提交成功后的回調(diào)函數(shù)。

利用這種提交方式，可以實(shí)現(xiàn)異步表單提交，很方便。但是，還是有點(diǎn)不滿足，比如說，我可能想在提交表單之前驗(yàn)證一下，雖然可以手動(dòng)地在提交表單動(dòng)作之外完成，但是很麻煩。form插件有沒有繼承這樣的功能呢？

二、options參數(shù)

上面只講了form中的一個(gè)function回調(diào)函數(shù)參數(shù)，其實(shí)它還有一個(gè)參數(shù)，就是options。有什么用呢？

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>

  var options = {
   target:'#output1',   // 把服務(wù)器返回的內(nèi)容放入id為output1的元素中
   beforeSubmit: fun1,   // 提交前的回調(diào)函數(shù)
   success:  fun2,   // 提交后的回調(diào)函數(shù)
   dataType:     // 接收服務(wù)端返回的類型 xml,scrpit,json
  };

  // beforeSubmit前可以作驗(yàn)證
  function fun1(formData,jqForm,options){
   // formData 提交值的數(shù)組對(duì)象
   // jqForm 表單元素的jQuery對(duì)象，jqForm[0]是其dom對(duì)象
   // 該函數(shù)如果返回false，則阻止表單提交

   // formData可以判斷全部不為空的情況
   for(var i=0;i<formData.length;i++){
    if(!formData[i].value){
     alert("都不能為空");
     return false;
    }
   }

   // jqForm可以判斷某個(gè)不為空的情況
   var form = jqForm[0];
   if(!form.name.value){
    alert("name不能為空");
    return false;
   }

   // fieldValue()可以獲取多值的數(shù)組形式，如checkbox
   var value = $('input[name=name]').fieldValue();
   if(!value[0]){
    return false;
   }
  }
  function fun2(responseText, statusText){
   // 根據(jù)dataType不同responseText解析方式不同，
   // 默認(rèn)  responseText
   // xml  responseXml以xml解析
   // json  responseJson
  }

  $(function(){
   //方式二 與方式一效果一樣
   $("#myForm").ajaxForm(options); // 要想使options生效，需要作為參數(shù)傳遞
  })
 </script>
</head>
<body>
 <form id="myForm">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value="提交">
  <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

可以看出，在beforeSubmit的回調(diào)函數(shù)fun1中，我們有三種方式獲取表單數(shù)據(jù) formData，jqForm，fieldValue 滿足了各種獲取值的方式，想怎么驗(yàn)證怎么驗(yàn)證。只要返回false就能阻止表單提交sucess回調(diào)的fun2也有狀態(tài)值和服務(wù)端的返回?cái)?shù)據(jù)，想怎么處理怎么處理。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: