用Ajax 提交表單數據 serialize() 並且校驗數據

表單提交數據

表單提交數據有集中方式,比如說下面的表單:

 <form class="container">
      
      <div class="row">
        <div class="col-25"><label for="checker">審覈人:</label></div>
         <div class="col-75"><input type="text" id="checker" name="checker" placeholder="你的名字.." /></div>
        </div>
     
      <div class="row">
        <div class="col-25"><label for="review">審覈意見:</label> </div>
        <div class="col-75">  <textarea id="review" name="review" placeholder="請給出寶貴意見.." style="height:200px"> </textarea>
        </div>
      </div>
      <div class="row">
        <button id="sonTableDialogBt" type="button">提交</button>
      </div>
    </form>

1.第一種方法就是通過Jquery的選擇器來分別獲取input值，然後再把那些放在一個對象裏，然後把這個對象賦給Ajax的數據對象裏，傳給服務器。
這樣做比較麻煩。
下面介紹第二種比較省事的方法: serialize 方法.

 let data = $("form.container ").serialize();

我們可以通過一行代碼來獲取表單裏的所有數據，就把這個對象傳給Ajax的參數就可以傳過去。

這種方法也有一種缺點，就是把那些值都放在了一個對象裏，導致我們校驗的時候有點麻煩。
但我們也可以先整塊獲取表單裏的數據，然後把這個對象解析，也就是deserialize().然後再一個個驗證。（當然你也可以用jquery validation plugins 校驗插件).

let data = $("form.container ").serialize();

  function deparam(query) {
    var pairs,
      i,
      keyValuePair,
      key,
      value,
      map = {};
    // remove leading question mark if its there
    if (query.slice(0, 1) === "?") {
      query = query.slice(1);
    }
    if (query !== "") {
      pairs = query.split("&");
      for (i = 0; i < pairs.length; i += 1) {
        keyValuePair = pairs[i].split("=");
        key = decodeURIComponent(keyValuePair[0]);
        value =
          keyValuePair.length > 1
            ? decodeURIComponent(keyValuePair[1])
            : undefined;
        map[key] = value;
      }
    }
    return map;
  }

  var rowData = deparam(data);

上述代碼先整塊獲取了表單的數據，然後通過封裝的方法來把數據給還原到另一個rowData對象裏，然後就可以通過rowData.checker,rowData.time等對象讀取方法來進行校驗了。