用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等对象读取方法来进行校验了。