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中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
js自定义回调函数
Dec 13 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP实现的json类实例
2015/07/28 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python如何为图片添加水印
2016/11/25 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
python GUI计算器的实现
2020/10/09 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
请说出你所知道的线程同步的方法
2013/04/19 面试题
如何客观的进行自我评价
2013/12/17 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
护士毕业实习感言
2014/03/05 职场文书
合作协议书
2014/04/23 职场文书
大学专科自荐信
2014/06/17 职场文书
社区敬老月活动总结
2015/05/07 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
Django中session进行权限管理的使用
2021/07/09 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python