在前端开发中，表单处理是常见的问题。虽然现在已经有很多现成的框架可以简化表单处理，但有时候我们还是需要更加灵活的表单处理工具。这时候，npm 包 form_utility 可以帮我们解决问题。
安装
使用 form_utility 之前，需要先安装它。在终端里输入以下命令：
--- - ------------
使用方法
在代码中使用 form_utility 的方法，是通过创建一个 form_utility 实例。具体使用方法如下：
------ ----------- ---- ---------------
----- ---- - --- -------------
-- ---- - --- --
-------- --------------------------------
-- ----
----- -
----- ---
------ ---
------- ---
--
-- ------
------ -
----- -
- ---------- ----------- -------- ------- --
- ---------- --------- ---- -- ---- -- -------- ------ - - - ---- --
--
------ -
- ---------- ----------- -------- ------- --
- ---------- -------- -------- --------- --
--
------- -
- ---------- ----------- -------- ------- --
--
--
---这里的 form 就是我们创建的 form_utility 实例。
在创建实例时，需要传入三个参数：
element: 表单的 DOM 元素；data: 表单数据；rules: 表单验证规则。
其中，data 参数是一个对象，每个属性对应一个表单字段，初始值是空字符串或数组等类型。
rules 参数也是一个对象，每个属性对应一个表单字段，属性的值是一个数组，每个元素是一个验证规则对象。验证规则对象有两个属性：
validator: 验证器函数名；message: 错误提示信息。
目前 form_utility 支持的验证器函数有以下几种：
required: 必填验证；email: 邮箱格式验证；length: 长度验证。
当我们创建一个 form_utility 实例后，需要通过 form.validate() 方法进行表单验证。
例如：
----------------------- -- - -- --------------- --------------- -- - -- ------------- ------------ ---
form.validate() 方法返回的是一个 Promise 对象。如果表单验证通过，Promise 对象会 resolve；如果表单验证失败，Promise 对象会 reject，并且会带上一个包含所有字段错误信息的对象。
示例代码
以下是一个完整的表单示例代码，其中使用了前面介绍的 form_utility：
--------- -----
----- ----------
------
----- ----------------
------------------- ----------
-------
------
----- --------- -------------------- --------------
-----
------ ----------------------
------ --------- ----------- ----------- ---------
---- ----------------------
------
-----
------ -----------------------
------ ---------- ------------ ------------ ---------
---- -----------------------
------
-----
------ ------------------------
------- ----------- ------------- ---------
------- ------------------
------- -----------------------
------- -------------------------
---------
---- ------------------------
------
------- -------------------------
-------
------- --------------------------------------------------------------------
--------
----- ---- - --- -------------
-------- --------------------------------
----- -
----- ---
------ ---
------- ---
--
------ -
----- -
- ---------- ----------- -------- ------- --
- ---------- --------- ---- -- ---- -- -------- ------ - - - ---- --
--
------ -
- ---------- ----------- -------- ------- --
- ---------- -------- -------- --------- --
--
------- -
- ---------- ----------- -------- ------- --
--
--
---
----------------------- -- -
-- ---------------
--------------- -- -
-- ----------------
----- --------- - --------------------------------------
----- ---------- - ---------------------------------------
----- ----------- - ----------------------------------------
-- ------------- -
--------------------- - ---------------
- ---- -
--------------------- - ---
-
-- -------------- -
---------------------- - ----------------
- ---- -
---------------------- - ---
-
-- --------------- -
----------------------- - -----------------
- ---- -
----------------------- - ---
-
---
---------
-------
-------总结
form_utility 是一个非常简单灵活的表单处理工具。它可以通过简单的 API 配置表单的数据和验证规则，并且提供了表单验证的方法。如果你需要更加灵活的表单处理工具，可以尝试使用 form_utility。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600568d781e8991b448e497f