在前端开发中，表单处理是一个非常重要的部分。而这个过程中我们需要进行大量的表单验证、格式转换等操作。这时候，一个好用的表单工具库就显得尤为重要了。今天，我们要介绍的就是一个非常好用且易用的表单工具库——tools-formup。通过本文，您将能够详细了解该工具库的使用方法和注意事项，同时也将拥有足够的能力自行开发和修改该工具库。
安装 tools-formup
您可以通过以下命令来安装 tools-formup：
npm install tools-formup
安装完成后，您可以将其导入到您的项目中:
// Node.js
const Formup = require('tools-formup')
// ES6
import Formup from 'tools-formup'使用 tools-formup
基本用法
一般来说，我们可以通过以下步骤来创建一个表单：
1. 定义表单项
首先，我们需要定义表单项，如下所示：
-- -------------------- ---- -------
----- ------ - -
-
----- -----------
--------- -----
-------- -----------
----- -------
--
-
----- -----------
--------- -----
-------- ----------
----- -----------
--
-上述代码中，我们定义了 username 和 password 两个表单项。各个属性的意义如下：
name：表单项的名称，必填项。required: 是否必填，true 或 false。message: 该表单项未填写时的提示信息，根据required来确定必填提示或者普通提示。type: 输入框类型，如 text、password、email 等html标签的 type。
2. 生成表单实例
接下来，我们需要创建一个 Formup 实例：
const formup = new Formup(fields)
接下来就可以进行表单的一系列操作了。
3. 校验表单
我们可以使用 validate 方法校验表单。该方法返回值为布尔型，表示该表单的校验结果。如下所示：
const validateResult = formup.validate()
if (validateResult) {
// 校验成功
} else {
// 校验失败
}4. 提交表单
最后，我们可以通过 getData 方法来获得表单数据，并将其提交到后台：
const data = formup.getData()
表单项扩展
tools-formup 支持表单项扩展。您可以自己定义一些属性，然后通过 rules 参数来进行校验。例如：
-- -------------------- ---- -------
----- ------ - -
-
----- -----------
--------- -----
-------- -----------
----- -------
--
-
----- --------
--------- -----
-------- ------------
----- --------
------ -
-
----- --------
-------- ---------
--
-
---------- ---
-------- -----------------
-
--
--
-上述代码中，我们添加了一些自定义属性，如 rules。rules 是一个数组，其中每一个元素都是一个规则对象。规则对象中可以包含以下属性：
type：类型限制。pattern：正则限制。minLength：字符串最小长度限制。maxLength：字符串最大长度限制。
在表单的校验过程中，校验器会按照规则中的顺序进行校验，只要一个规则不通过，就会直接返回错误结果。
注意事项
在使用 tools-formup 的过程中，您需要注意以下几个方面：
1. 依赖关系
由于 tools-formup 依赖于 validator.js，因此在引用 tools-formup 时，同时需要引用 validator.js。
2. 减小项目体积
为了减小项目体积，您可以只引用 validator.js 的某些 API。例如，我们只需要使用 isEmail 方法，可以这样引用：
import isEmail from 'validator/lib/isEmail'
这里只引用了 isEmail 方法，其他的方法不会被引入。
3. 自定义校验器
如果您需要使用自己的校验器和规则，可以传入一个 validator 对象，如下所示：
-- -------------------- ---- -------
------ ------ ---- --------------
------ - ------ ------- - ---- -----------
----- ------ - -
-
----- -----------
--------- -----
-------- -----------
----- -------
--
-
----- ------
--------- -----
-------- ----------
----- ---------
------ -
-
---------- ------
-------- ----------
--
-
----- ---------
---- ---
---- ---
-------- ---------------
-
--
--
-
----- --------
--------- -----
-------- ------------
----- --------
------ -
-
---------- --------
-------- ---------
--
--
--
-
----- --------- - -
------
--------
-
----- ------ - --- -------------- - ---------- --------- --上述代码中，我们传入了一个 validator 对象，其中包含了我们需要使用的校验器方法。该方法会被覆盖掉默认的校验器方法。
示例代码
最后，我们给出一份完整的示例代码供参考：
-- -------------------- ---- -------
------ ------ ---- --------------
------ - ------ ------- - ---- -----------
----- ------ - -
-
----- -----------
--------- -----
-------- -----------
----- -------
--
-
----- ------
--------- -----
-------- ----------
----- ---------
------ -
-
---------- ------
-------- ----------
--
-
----- ---------
---- ---
---- ---
-------- ---------------
-
--
--
-
----- --------
--------- -----
-------- ------------
----- --------
------ -
-
---------- --------
-------- ---------
--
--
--
-
----- --------- - -
------
--------
-
----- ------ - --- -------------- - ---------- --------- --
----- -------------- - -----------------
-- ---------------- -
----- ---- - ----------------
-----------------
- ---- -
----- ------ - ------------------
-------------------
-在这个示例代码中，我们定义了一个包含三个表单项的表单，并使用 validator.js 库中的 isEmail 和 isInt 方法进行校验。最后，我们使用 tools-formup 提供的 validate 方法校验表单，如果校验成功，就可以调用 getData 方法获得表单数据，否则调用 getErrors 方法获得错误提示信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005579d81e8991b448d49e5