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>