js实现form2json轻量框架

来源：互联网发布：python客户端接口登录编辑：程序博客网时间：2024/05/20 04:14

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 newFormToJson(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>

阅读全文

1 0