form表单序列化详解(推荐)


Posted in Javascript onAugust 15, 2017

form的序列化,即将表单中的键值序列化为可提交的字符串

表单

<form id="target">
  <select name="age">
   <option value="age1">20</option>
   <option value="age2" selected>21</option>
  </select>
  <input name="name" value="Cynthia">
  <label>passsword</label>
  <input type="password" name="password" value="123456">
  <input type="hidden" name="salery" value="3333">
  <textarea name="description" cols="15" rows="5">description</textarea>
  <input type="checkbox" name="hobby" value="football" checked> Football
  <input type="checkbox" name="hobby" value="basketball"> Basketball
  <input type="radio" name="sex" value="Female" checked> Female
  <input type="radio" name="sex" value="Male"> Male
 </form>

方法一 

function serializeForm1(form){ 
   var setForm = ""; 
   for(var key in form){ 
    if(form.hasOwnProperty(key)){ 
     setForm += '"'+form[key].name+'"'+':'+'"'+form[key].value + '"'+',';
    }
   }
   setForm = "{" + setForm.slice(0,setForm.length -1) + "}";
   console.log(setForm);
   // console.log(JSON.parse(setForm));
   return JSON.parse(setForm);
  }
   
  // 调用
  var oForm = document.getElementById('target');
  console.log(serializeForm3(oForm));

结果:

form表单序列化详解(推荐)

方法二

function serializeForm2(form) {
   var parts = [];
   for (var i = 0, i1 = form.elements.length; i < i1; i++) {
    var field = form.elements[i];
    switch (field.type) {
     case 'select-one':
     case 'select-multiple':
      if (field.type.length) {
       for (var j = 0, j1 = field.options.length; j < j1; j++) {
        var option = field.options[j];
        if (option.selected) {
         var optionValue = '';
         if (option.hasAttribute('value') && option.attributes['value'].specified) {
          //specified表明是否有此属性,有的话返回true,若定义了此属性但尚未添加到元素中也返回true。
          optionValue = option.value;
         } else {
          optionValue = optionValue.text;
         }
         parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optionValue));
        }
       }
      }
      break;
     case undefined:
     case 'file':
     case 'submit':
     case 'reset':
     case 'button':
      break;
     case 'radio':
     case 'checkbox':
      if(!field.checked){
       break;
      }else{
       parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.dataset['index']));
       break;
      }
     default:
      if(field.name.length){
       parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
      }
    }
   }
   return parts.join('&');
  }
   
  // 调用
  var oForm = document.getElementById('target');
    console.log(serializeForm2(oForm));

结果:

form表单序列化详解(推荐)

方法三

function serializeForm3(form){
   if(!form||form.tagName.toUpperCase()!='FORM'){
    return false;
   }
   var res=[];
   var tag,tagType,tagVal,tagName;
   for(var i=0;i<form.length;i++){
    tag=form[i];
    tagType=form[i].type;
    tagVal=form[i].value;
    tagName=form[i].name; 
    var reg1=/['textarea'|'text'|'passsword'|'label']/g;
    var reg2=/['radio'|'checkbox']/g;
    var reg3=/['select']/g;
    if(reg1.test(tagType)){
     res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal));
    }else if(reg2.test(tagType)&&tag.checked){
     res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal)); 
    }else if(reg3.test(tagType)){
     for(var j=0;j<tag.options.length;j++){
      if(tag.options[j].selected){
      res.push(encodeURIComponent(tagVal)+"="+encodeURIComponent(tag.options[j].value||tag.options[j].text)); 
      }
     }
    }else{}
   } 
   return res.join(" & ");
  }
   
  // 调用
  var oForm = document.getElementById('target');
  console.log(serializeForm3(oForm));

结果:

form表单序列化详解(推荐)

以上就是本文的全部内容啦,希望对大家有所帮助~

Javascript 相关文章推荐
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
四十九个javascript小知识实用技巧
Nov 20 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 #Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 #Javascript
jQuery DOM节点的遍历方法小结
Aug 15 #jQuery
Mongoose实现虚拟字段查询的方法详解
Aug 15 #Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 #Javascript
React应用中使用Bootstrap的方法
Aug 15 #Javascript
JavaScript函数中的this四种绑定形式
Aug 15 #Javascript
You might like
PHP 程序授权验证开发思路
2009/07/09 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
可输入的下拉框
2006/06/19 Javascript
js 小数取整的函数
2010/05/10 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python实现的文件同步服务器实例
2015/06/02 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
Python使用django搭建web开发环境
2017/06/09 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
香港交友网站:be2香港
2018/07/22 全球购物
运动会广播稿20字
2014/02/18 职场文书
怀念母亲教学反思
2014/04/28 职场文书
英文演讲稿
2014/05/15 职场文书
升国旗演讲稿
2014/09/05 职场文书
现场施工员岗位职责
2015/04/11 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL