Demo
class myFormData {
static inputsData = null
static transform(inputs) {
inputs.forEach(v => {
if (Array.isArray(v)) {
myFormData.transform(v)
} else {
if (v.nodeName === 'INPUT') {
switch (v.attributes.type.nodeValue) {
case 'email':
case 'date':
case 'datetime':
case 'datetime-local':
case 'text':
case 'password':
case 'color':
case 'hidden':
case 'month':
case 'number':
case 'range':
case 'search':
case 'tel':
case 'time':
case 'url':
case 'week':
myFormData.inputsData.push([v.attributes.name.nodeValue, v.value]);
break
case 'checkbox':
case 'radio':
if (v.checked === true || v.attributes.checked) {
myFormData.inputsData.push([v.attributes.name.nodeValue, v.value])
}
break
case 'file':
myFormData.inputsData.push([v.attributes.name.nodeValue, v.files[0]])
}
} else if (v.nodeName === 'SELECT') {
let option = [...v.children].find(v => v.selected === true)
myFormData.inputsData.push([v.attributes.name.nodeValue, option.value])
}
}
})
}
static searchDOM(el) {
const inputs = []
const elChild = el.children;
[...elChild].forEach(v => {
if ((v.nodeName === 'INPUT' && v.attributes.type.nodeValue !== 'submit') || (v.nodeName === 'SELECT')) {
inputs.push(v)
}
else if (v.children.length !== 0) {
inputs.push(myFormData.searchDOM(v))
}
});
return inputs
}
constructor(el) {
this.el = el;
myFormData.inputsData = []
myFormData.transform(myFormData.searchDOM(el))
}
has(key) {
let firstIndex = myFormData.inputsData.findIndex((v) => {
return v[0] === key
})
return firstIndex === -1 ? false : true
}
delete(key) {
if (!this.has(key)) {
return null
}
for (let i = 0; i < myFormData.inputsData.length; i++) {
if (myFormData.inputsData[i][0] === key) {
myFormData.inputsData[i] = null
}
}
myFormData.inputsData = myFormData.inputsData.filter(v => v !== null)
}
get(key) {
if (!this.has(key)) {
return null
}
let first = myFormData.inputsData.find((v) => {
return v[0] === key
})
return first[1]
}
getAll(key) {
let tmpArr = []
let filterData = myFormData.inputsData.filter((v) => {
return v[0] === key
})
filterData.forEach(v => {
tmpArr.push(v[1])
})
return tmpArr.length > 0 ? tmpArr : null
}
set(key, value) {
myFormData.inputsData = new Map(myFormData.inputsData)
myFormData.inputsData.set(key, value)
myFormData.inputsData = Array.from(myFormData.inputsData)
}
append(key, value) {
if (!key) {
throw new Error('key undefined')
}
if (!value) {
throw new Error('value not null')
}
myFormData.inputsData.push([key, value])
}
forEach(callback) {
let inputsData = myFormData.inputsData
let length = inputsData.length
for (let i = 0; i < length; i++) {
callback(inputsData[i][1], inputsData[i][0], this)
}
}
*keys() {
let inputsData = myFormData.inputsData
let length = inputsData.length
for (let i = 0; i < length; i++) {
yield inputsData[i][0]
}
}
*values() {
let inputsData = myFormData.inputsData
let length = inputsData.length
for (let i = 0; i < length; i++) {
yield inputsData[i][1]
}
}
*entries() {
let inputsData = myFormData.inputsData
let length = inputsData.length
for (let i = 0; i < length; i++) {
yield inputsData[i]
}
}
[Symbol.iterator]() {
let index = 0
let data = myFormData.inputsData
let length = data.length
return {
next() {
if (index < length) {
return { value: data[index++], done: false }
} else {
return { done: true }
}
}
}
}
}
export default myFormData
Test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test MyFormData</title>
</head>
<body>
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="color" name="colors">
<input type="date" name="data">
<input type="file" name="file">
<button type="button" id="submit">Submit</button>
<input type="month" name="month">
<input type="number" name="number">
<input type="range" name="range">
<input type="time" name="time">
<input type="tel" name="tel">
<input type="url" name="url">
<input type="week" name="week">
<input type="datetime" name="datetime">
<input type="datetime-local" name="datetime-local">
<select name="city">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="search" name="search">
<input type="hidden" name="hiddens">
</form>
<script type="module">
import myFormData from './myFormData.js'
function query(el) {
return document.querySelector(el)
}
query('#submit').addEventListener('click', function(e) {
e.preventDefault()
// 原生 formData
// let myForm = new FormData(query('#myForm'))
// for (let n of myForm) {
// console.log(n);
// }
// 自制 formData
let myForm = new myFormData(query('#myForm'))
myForm.append('abc', 123)
myForm.delete('username')
for (let n of myForm) {
console.log(n);
}
})
</script>
</body>
</html>
