form2js 快速入门教程3步把HTML表单字段变成结构化JS对象【免费下载链接】form2jsParse browser forms into structured JavaScript objects. Six adapters — React hooks, vanilla DOM, jQuery, FormData, and more. One coherent API.项目地址: https://gitcode.com/gh_mirrors/fo/form2jsform2js 是一个轻量级表单解析工具专门把 HTML 表单字段自动转换成结构化的 JS 对象。你只需要在字段名里写好person.name.first这样的路径语法提交表单时就能直接拿到嵌套对象——不用手写遍历、不用逐个拼接键值对。本快速入门教程带你在 3 步内完成一次「表单变 JS 对象」的转换。为什么手动处理 HTML 表单这么麻烦传统方式处理表单提交你要做三件事遍历表单里每一个input、select、textarea逐个读取字段的name和value遇到person.name.first这类嵌套命名还得自己拆分路径、一层层建好嵌套结构。form2js 把这一步反过来把结构直接写进字段名解析引擎替你生成对象。项目最初发布于 2010 年如今已针对现代 JavaScript、TypeScript 和 ESM 全面重写支持 React、jQuery 与服务端环境且六个包共享同一套一致的 API。全家福6 个适配器一套 API适配器适用场景核心函数form2js/dom原生浏览器 DOMformToObject()直接提取表单字段form2js/reactReact 表单useForm2js()Hook自带提交状态与校验form2js/jqueryjQuery 项目$.fn.toObject()插件form2js/form-dataNode.js / 服务端管线formDataToObject()解析FormData或键值对数组form2js/js2form用数据回填表单编辑页objectToForm()把对象写回字段form2js/core底层引擎纯路径解析与展平无 DOM 依赖按需安装即可互不捆绑。3 步把表单变成 JS 对象第一步安装需要的包原生浏览器项目一行搞定npm install form2js/domReact 项目用npm install form2js/react reactjQuery 项目用npm install form2js/jquery jquery。第二步给字段起「路径名」把嵌套结构和数组直接写进name三种最常用的写法name 写法含义解析结果person.name.first点路径构建嵌套对象{ person: { name: { first: Sam } } }person.roles[]空括号推入数组{ person: { roles: [captain] } }items[5].title带下标保留行顺序数组中对应位置的对象完整的路径解析规则包括稀疏下标自动压缩等边缘情况见 docs/api-index.md。第三步调用一个函数import { formToObject } from form2js/dom; const form document.getElementById(profileForm); const data formToObject(form); // { person: { name: { first: Sam, last: Vimes }, roles: [captain] } }就这么多——没有任何 DOM 遍历代码拿到的对象可以直接交给JSON.stringify或后端 API。formToObject的实现在 packages/dom/src/index.ts。React 版一个 Hook 搞定提交、校验与状态在 React 中useForm2js把「解析表单 提交 错误处理」压缩成一次 Hook 调用const { onSubmit, isSubmitting, isError, error, isSuccess, reset } useForm2js(async (data) await sendFormData(data), { schema: MySchema });onSubmit直接挂到form上自动解析并拦截默认提交isSubmitting / isError / isSuccess禁用按钮、展示提示的状态开箱即用schema可选传入校验 schema任何带parse()的库都可以如 Zod校验通过后拿到的data类型自动推导。Hook 完整实现在 packages/react/src/index.ts。默认行为3 个容易踩坑的点form2js 默认遵循浏览器原生表单提交语义提前了解这 3 点能省不少调试时间空值自动跳过—— 空字符串和null不会出现在结果里默认skipEmpty: true禁用控件不采集——disabled的字段以及disabledfieldset 内的控件都会被忽略可用getDisabled: true显式包含危险路径被拦截—— 字段名中出现__proto__、prototype、constructor会被默认拒绝防止原型污染。未勾选的复选框不占数组坑位等其余规则完整文档在 docs/api-index.md。进阶js2form 反向回填表单「编辑记录」场景需要把对象填回表单。form2js/js2form的objectToForm(formElement, data)会按路径把对象中的值逐一写回对应字段与解析方向构成一条对称的管线。用法与细节见 docs/api-js2form.md。更多学习资源项目总览与安装说明README.md六个包的 API 总目录docs/api-index.mdDOM 适配器含extractPairs、nodeCallback等进阶能力docs/api-dom.md服务端 FormData 解析docs/api-form-data.md核心引擎源码路径解析与对象合并packages/core/src/index.ts从旧版 form2js 迁移过来先看docs/migrate.md【免费下载链接】form2jsParse browser forms into structured JavaScript objects. Six adapters — React hooks, vanilla DOM, jQuery, FormData, and more. One coherent API.项目地址: https://gitcode.com/gh_mirrors/fo/form2js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考