最近寫了一個召集令，傳統表單提交注冊。寫寫遇到的費時間的點與解決辦法
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>