js实现form2json轻量框架

最新推荐文章于 2023-02-13 09:57:59 发布

原创最新推荐文章于 2023-02-13 09:57:59 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

前端学习笔记专栏收录该内容

276 篇文章

订阅专栏

本文介绍了一款将HTML表单转换为JSON格式数据的实用工具。该工具通过JavaScript实现，可以方便地从表单中获取数据，并将其组织成易于处理的JSON格式。支持多种输入类型，包括文本框、复选框、单选按钮等。

github源码地址：

https://github.com/MrITzhongzi/tool-functions/tree/master/%E8%A1%A8%E5%8D%95form2json

使用文档：

fotm2date: 使用文档
1、引入js文件
<script src="./form2json.js"></script>
2、调用暴露的全局方法
var formObj = formInterface() //返回一个form相关对象，各种方法就封装在这个对象里
3、调用form2JSon方法，传入一个父盒子的id，返回一个由input的name和value组成的对象
var dataObj = formObj.form2JSon('form')

注释：formInterface() 对象返回的对象中的方法解析：
1、form2JSon 传入一个父盒子的id，返回一个由input的name和value组成的对象

框架js源码：（很简单的）

/**
* lihongwei
* 2017/8/30
*/
(function () {
var reObj 
= {}
function 
form2JSon (id) {
return new
FormToJson(id)
}
function 
FormToJson (id) {
this.init(id)
return returnData()
}
var prototype 
= {
init: function (id) {
var box 
= document.querySelector('#form')
traversal(box)
}
}
function 
traversal (boxDom) {
var doms 
= boxDom.children
Array.prototype.forEach.call(doms,
function (element) {
if (element.tagName 
=== 'INPUT') {
if (element.type 
=== 'radio') {
dealRadio(element)
} else if (element.type
=== 'checkbox') {
dealCheckbox(element)
} else {
var name 
= element.getAttribute('name')
var value 
= element.value
reObj[name] = value
}
} else if (element.tagName
=== 'SELECT') {
var selectName 
= element.getAttribute('name')
var selectVal 
= element.value
reObj[selectName] = selectVal
} else {
if (element.children.length 
!== 0) {
traversal(element)
}
}
})
}
function 
dealRadio (element) {
var radioName 
= element.getAttribute('name')
var radioEles 
= document.querySelectorAll('input[name="'
+ radioName +
'"]')
for (var j
= 0; j 
< radioEles.length; j++) {
if (radioEles[j].checked) {
reObj[radioName] = radioEles[j].value
}
}
}
function 
dealCheckbox (element) {
var checkArr 
= []
var checkName 
= element.name
var checkEles 
= document.querySelectorAll('input[name="'
+ checkName +
'"]')
for (var i
= 0; i 
< checkEles.length; i++) {
if (checkEles[i].checked) {
checkArr.push(checkEles[i].value)
}
}
reObj[checkName] = checkArr
}
function 
returnData () {
return reObj
}
/**
* 暴露的借口
* form2JSon： 传入盒子的id 返回 由input的name和value组成的 对象
* 
*/
function 
formInterface () {
return {
form2JSon: form2JSon
}
}
FormToJson.prototype 
= prototype
window.formInterface = formInterface
})()

实例demo：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>form2json</title>
</head>
<body>
<div id="form">
<div>
<input type="text"
name="haha000">
<div>
<div>
<div>
<input type="text"
name="haha">
</div>
<select name="select"
id="">
<option value="0000">99</option>
</select>
</div>
<input type="text"
name="haha111">
<input type="text"
name="haha222">
<input type="text"
name="haha333">
</div>
</div>
<select name="wwww"
id="">
<option value="0">请选择</option>
<option value="1">22</option>
<option value="2">22</option>
<option value="3">22</option>
<option value="4">22</option>
</select>
<input type="radio"
value="1" 
name="sex">
<input type="radio"
value="2" 
name="sex" 
checked>
<input type="checkbox"
value="1" 
name="sex1">
<input type="checkbox"
value="2" 
name="sex1" 
checked>
<input type="checkbox"
value="4" 
name="sex1">
<input type="checkbox"
value="6" 
name="sex1" 
checked>
</div>
<input type="checkbox"
value="1" 
name="sex">
<input type="checkbox"
value="2" 
name="sex" 
checked>
<button>生成</button>
</body>
<script src="./form2json.js"></script>
<script>
var btn 
= document.querySelector('button')
btn.onclick =
function(){
var formObj 
= formInterface()
var dataObj 
= formObj.form2JSon('form')
console.log(JSON.stringify(dataObj))
}
</script>
</html>