手写一个简单的form-serialize库
2023-07-17 本文已影响0人
h2coder
form-serialize 插件
form-serialize插件，是一个表单序列化的JS库，也就是方便我们获取表单中的值。如果每个表单元素的值都要手动获取，代码是很冗余的。
插件使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form-serialize插件使用</title>
</head>
<body>
<form action="javascript:;" class="example-form">
<input type="text" name="uname">
<br>
<input type="text" name="pwd">
<br>
<input type="button" class="btn" value="提交">
</form>
<!--
表单 序列化
1、序列化，转换数据类型，收集数据
2、用法
1）引入JS文件
2）设置form表单元素，而且要求每个表单元素都要有一个 name 属性，如果没有，则拿不到DOM元素的值
3）调用并传递参数，返回对应的结果
目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
-->
<!-- 1）引入JS文件 -->
<script src="./lib/form-serialize.js"></script>
<script>
document.querySelector('.btn').addEventListener('click', () => {
// 2）设置 form 元素
// serialize(form的元素);
// 查找form表单
const form = document.querySelector('form');
// 3）调用并传递参数，返回对应的结果
// 搜索form表单中的值，返回字符串格式
const data = serialize(form);
console.log(data);// uname=11&pwd=123
// hash:true，设置返回的是对象，而不是字符串
// empty:true，设置如果某个表单没有填值，也要获取，如果没有该设置，默认是不会拿的
const dataObj = serialize(form, { hash: true, empty: true });
console.log(dataObj);
});
</script>
</body>
</html>
手写的思路
- 通过选择器查找form表单中所有带name属性的input标签，成为一个数组
- 通过for-in循环数组，取出input元素的name属性值，作为对象的key，input元素的value属性值，作为对象的属性值
- 最后根据配置对象，输出对象格式或字符串格式
pic.png
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手写一个简单的form-serialize</title>
</head>
<body>
<form action="javascript:;" class="example-form">
<input type="text" name="uname" value="aaa">
<br>
<input type="text" name="pwd" value="bbb">
<br>
<label>
<input type="checkbox" class="hash-ck" checked>hash
</label>
<label>
<input type="checkbox" class="empty-ck" checked>empty
</label>
<br>
<input type="button" class="btn" value="默认配置">
<input type="button" class="btn2" value="自定义配置">
</form>
<script>
const hashCheckBox = document.querySelector('.hash-ck');
const emptyCheckBox = document.querySelector('.empty-ck');
const btn = document.querySelector('.btn');
const btn2 = document.querySelector('.btn2');
/*
表单序列化
*/
function serialize(form, config = {
hash: false,
empty: false
}) {
// 获取所有带有 name 属性的表单
const names = form.querySelectorAll('input[name]');
// 声明结果对象
const obj = {};
// 遍历，获取表单元素的name和value，设置到对象上
names.forEach((ele, index) => {
// 获取表单的name属性
const name = ele.name;
// 获取表单的value属性
const value = ele.value;
// 如果表单值为空，则判断配置对象中，是否设置了 empty 属性为true
if (value.trim() === '') {
// 为true，则把空值也设置到对象上
if (config.empty) {
obj[name] = value;
} else {
obj[name] = '';
}
} else {
// 设置到对象上
obj[name] = value;
}
});
// 返回对象，例如：{uname: 'aaa', pwd: 'bbb'}
if (config.hash) {
return obj;
} else {
// 返回字符串，例如：uname=aaa&pwd=bbb
let result = '';
const andStr = '&';
for (const key in obj) {
const value = obj[key];
result += `${key}=${value}`
result += andStr;
}
// 删除最后一个 &
result = result.substring(0, result.lastIndexOf(andStr));
return result;
}
}
btn.addEventListener('click', function () {
const form = document.querySelector('form');
// 不设置配置选项
const data = serialize(form);
console.log(data);
});
btn2.addEventListener('click', function () {
const form = document.querySelector('form');
// 自定义配置
const config = {
hash: hashCheckBox.checked,
empty: emptyCheckBox.checked
}
console.log(config);
const data = serialize(form, config);
console.log(data);
});
</script>
</body>
</html>
