jquery表單提交獲取數據(帶toast dialog)

最近寫了一個召集令，傳統表單提交註冊。寫寫遇到的費時間的點與解決辦法

git項目地址：form-demo（針對於手機版，懶人能夠直接使用，有排版和樣式）

 

demo使用Jquery,toast使用jquery.toast.js,dialog是本身寫的蒙版加簡單彈出框。

 

form中submit就發起了表單請求，那麼咱們須要在提交以前驗證數據(這裏簡單的必填驗證)怎麼辦呢？

解決：from提供了咱們能夠在onSubmit中進行一系列的自定義校驗操做

<form id="fromSave" name="fromSave" action="/form_demo/register_picker.html" target="nm_iframe" onsubmit="return beforeSubmit(this);">　　

若是你又不想經過dom操做一個一個獲取每一個輸入框的值來校驗，咱們能夠經過表單的來統一處理。

function beforeSubmit(form) {
        if (!form.name.value || form.name.value == '') {
            toast('請輸入姓名')
            form.name.focus();
            return false;
        }
        if (!form.gender.value || form.gender.value == '') {
            toast('請選擇性別')
            return false;
        }
}

由於表單sumit提交以後咱們沒有一個地方寫一個callback函數來處理返回的數據(如失敗提示失敗信息),那麼咱們改如何交互呢？

解決：咱們可使用ajax發送請求，那麼咱們又不想一個一個將表單的key,value封裝爲JSON格式，from提供serializeArray() 方法經過序列化表單值來建立對象數組（名稱和值）。

這樣獲得JSON對象數組,那咱們須要ajax data裏面的json格式，有人可能以爲使用JSON.stringfy就能獲得，這樣獲得的是JSON數組。咱們可使用循環和累加器來格式化成咱們想要的數據格式

console.log($("#fromSave").serializeArray())//咱們來看看三種輸出的樣子
        console.log(JSON.stringify($("#fromSave").serializeArray()))
        finalRes = $("#fromSave").serializeArray().reduce(function(result, item){
             result[item.name] = item.value;
             return result;
             }, {})
        console.log(finalRes)　　

第一種序列化後：

第二種JSON格式化後：

第三種累加器處理後：

很明顯第三種是咱們ajax須要的格式，也不用一個在{ }裏封裝。

 

最後一個知識點是from提交會跳轉頁面，咱們須要在當前頁面提交而且不跳轉頁面不刷新。

咱們能夠在當前頁面寫一個隱藏的<iframe></iframe>，提交目標在這個內框架中。

 <form id="fromSave" name="fromSave" action="/form_demo/register_picker.html" target="nm_iframe" onsubmit="return beforeSubmit(this);">

 

彩蛋：

1. serialize() 方法能夠操做已選取個別表單元素的 jQuery 對象，好比 <input>, <textarea> 以及 <select>。不過，選擇 <form> 標籤自己進行序列化通常更容易些：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

輸出標準的查詢字符串：

a=1&b=2&c=3&d=4&e=5

註釋：只會將」成功的控件「序列化爲字符串。若是不使用按鈕來提交表單，則不對提交按鈕的值序列化。若是要表單元素的值包含到序列字符串中，元素必須使用 name 屬性。

2.獲取form表單數據另外一種方法

<script type="text/javascript">
   function fromCheck()
    {
      for(var i=0;i<document.form1.elements.length-1;i++)
       {
         if(document.form1.elements[i].value=="")
          {
            console("當前輸入項不能爲空");
            document.form1.elements[i].focus();
            return false;
          }
        }
        return true;             
    }</script>