html表单序列化为json对象需遍历有效输入项，提取name与值并组装为js对象，再调用json.stringify()转换；需过滤禁用、无name、非数据型控件，分类处理各类输入值，支持嵌套结构解析。
HTML 表单序列化为 JSON 对象，核心是遍历表单内所有有效的输入项（input、select、textarea等），提取 name 和对应值，再按结构组装成 JavaScript 对象，最后可选转为 JSON 字符串。
获取表单元素并遍历有效字段
使用 form.elements 或 form.querySelectorAll('input, select, textarea') 获取所有控件。注意过滤掉：
• disabled 或 name 为空的元素
• type="button"、"submit"、"reset" 等非数据型输入
• 未选中的复选框（checkbox）和单选框（radio）
正确处理不同类型的输入值
不同控件取值方式不同，需分类处理：
-
文本类（text、email、number、textarea 等）：直接取
element.value -
单选框（radio）：只取当前被选中的那个（可用
form.querySelector('input[name="xxx"]:checked')） - 复选框（checkbox）：若多个同名，应收集为数组；若仅一个，可设为布尔值或字符串（按需约定）
-
下拉框（select）：单选取
select.value；多选（multiple）取Array.from(select.selectedOptions).map(opt => opt.value)
构建嵌套或数组结构（可选进阶）
若表单字段名含点号或方括号（如 user.name、tags[]、items[0].price），可解析 name 属性实现层级赋值：
-
user.email→ 转为{ user: { email: "a@b.com" } } -
hobbies[]→ 收集所有同名 checkbox 值为数组["reading", "coding"] -
phones[0].number和phones[1].number→ 合并为phones: [{ number: "123" }, { number: "456" }]
这类逻辑需自定义解析函数，基础场景用平铺对象即可。
转换为 JSON 字符串
得到 JS 对象后，调用 JSON.stringify(obj) 即可。注意：
• 确保值是可序列化的（避免函数、undefined、Symbol、循环引用）
• 如需格式化输出，加参数 JSON.stringify(obj, null, 2)
示例代码片段：
function formToJSON(form) {
const obj = {};
const fields = form.querySelectorAll('input:not([type=button]):not([type=submit]):not([type=reset]), select, textarea');
fields.forEach(field => {
if (!field.name || field.disabled) return;
const { name, type, value } = field;
if (type === 'checkbox' || type === 'radio') {
if (type === 'radio' && !field.checked) return;
if (type === 'checkbox') {
if (!obj[name]) obj[name] = [];
if (field.checked) obj[name].push(value);
return;
}
obj[name] = value;
return;
}
obj[name] = value;
});
return obj;
}
// 使用
const form = document.querySelector('#myForm');
const data = formToJSON(form);
const jsonStr = JSON.stringify(data); // → {"username":"Alice","age":"28"}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
