在前端开发中，表单是很常见、使用广泛的一种元素。然而，当需要将表单的数据序列化成一个对象，以方便在前端处理时，手写将表单数据取出、组成对象的代码相当繁琐。这时，一个简单易用的 npm 包 form-serialize 便可以派上用场了。
1. 安装 form-serialize
使用 npm，我们可以很容易地安装 form-serialize，只需要在终端中输入以下命令即可：
--- ------- --------------
2. 使用 form-serialize 获取表单数据
form-serialize 的 API 及其使用方法非常简单。我们先来看一下如何将表单数据序列化成一个对象。
2.1 获取表单元素
首先需要获取到表单元素。可以使用 document.getElementById、 document.querySelector、 document.querySelectorAll 等方式获取。
----- ------------
------ ----------------------
------ ----------- --------- ------------
----
------ ---------------------
------ ------------- -------- -----------
----
------ -----------------------
------ ------------ ---------- -------------
----
------ ------------- -----------
------------ ------ - ----------------------------------
2.2 序列化表单数据
在获取到表单元素后，我们可以直接使用 form-serialize 库的 serialize 方法来将表单数据序列化成一个对象。
----- --------- - -------------------------- ----- -------- - ------------------ ----------------------
上述代码展示了如何将表单数据序列化成一个对象，并将其输出到控制台。
2.3 序列化指定表单元素
如果我们只需要序列化表单中的一部分元素，可以将其指定为 serialize 方法的第二个参数。
----- --------- - -------------------------- ----- -------- - ----------------- ------ ----- --------- ------- ----------------------
上述代码将表单中被禁用的元素也包括在序列化的结果中，并输出到控制台。
3. form-serialize 的高级用法
form-serialize 还提供了一些其它的 API，下面分别进行介绍。
3.1 serializeArray 方法
serializeArray 方法将表单数据序列化成一个 JSON 数组。
----- --------- - -------------------------- ----- ------------- - --------------------------------- ---------------------------
3.2 parse 和 parseArray 方法
parse 方法将序列化的 form data 字符串转化为对象的形式。而 parseArray 方法则将 JSON 数组转化为对象数组的形式。
----- --------- - --------------------------
----- -------------- - ----------------------------------------
----- -------- - --------------------------------
----------------------
----- ------------- - -
------ ------- ------ -------
------ ------ ------ ----
------ -------- ------ ------------------
--
----- ---------------- - ------------------------------------
------------------------------4. 示例代码
下面是一个完整的使用 form-serialize 库的示例代码。
--------- -----
------
------
----- ----------------
--------------------- ------------
-------
------
----- ------------
------ ----------------------
------ ----------- --------- ------------
----
------ ---------------------
------ ------------- -------- ---------- ---------
----
------ -----------------------
------ ------------ ---------- -------------
----
------ ------------- -----------
-------
------- --------------------------------------------------------------------
--------
----- ------ - ----------------------------------
----- --------- - --------------------------
----- -------- - ----------------- ------ ----- --------- -------
----------------------
---------
-------
-------5. 相关学习
在前端开发中，借助 npm 包 form-serialize 可以更方便地序列化表单数据，一定程度上减少了重复性代码的编写。值得前端开发者掌握和使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaf68b5cbfe1ea0611023