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>
