简介
在前端开发中，表单是最常见的交互方式之一。而 formulary 是一个简化表单开发的 npm 包，它提供了丰富的验证器和自定义组件，使得表单的开发变得更加简单和直观。
安装
使用 npm 进行安装：
npm install formulary
使用
formulary 主要有两类 API：
- 创建表单对象：
formulary.createForm(...) - 创建验证器：
formulary.createValidator(...)
创建表单对象
首先我们需要引入 formulary：
import * as formulary from 'formulary';
然后使用 formulary.createForm(...) 方法创建表单对象：
-- -------------------- ---- -------
----- ---- - ----------------------
------- -
-- ----
--
--------- ------ -------- -- -
-- ------
--
------- ---- -- -
-- ------
-
---formulary.createForm(...) 方法接收一个对象，其中 fields 属性定义了表单字段，validate 属性定义了表单验证回调，submit 属性定义了表单提交回调。
定义表单字段
表单字段通过一个对象进行定义，其中对象的属性名表示字段名，属性值表示字段的属性：
-- -------------------- ---- -------
----- ------ - -
--------- -
------ ------
----- -------
--------- -----
---------- -
---------- --
---------- --
-
--
--------- -
------ -----
----- -----------
--------- -----
---------- -
---------- --
---------- ---
-------- -------------------------------------------
-
-
--上述代码定义了两个表单字段，分别是 username 和 password。值得注意的是，每个表单字段都需要指定 label、type、required 和 validator 属性：
label属性表示字段标签，用于在表单中进行显示type属性表示字段类型，目前支持的类型有text、password、email、number等required属性表示字段是否必填validator属性表示字段的验证器，可以是一个对象或者一个函数
定义验证器
表单验证器通过一个对象进行定义，其中对象的属性名表示验证器名称，属性值表示验证器函数：
const validator = formulary.createValidator({
usernameExists: value => {
// 验证用户名是否已经存在
},
passwordStrength: value => {
// 验证密码强度是否符合要求
}
});上述代码定义了两个验证器，分别是 usernameExists 和 passwordStrength。值得注意的是，每个验证器都是一个函数，它需要接收一个参数 value，表示输入框的值，并返回一个布尔值，表示验证是否通过。
表单验证与提交
当表单的某个事件触发时，需要调用表单的相应方法来进行验证或提交操作。下面是一些常用的表单方法：
form.onChange(name, value)：当输入框的值发生改变时，需要调用该方法进行设置值form.onSubmit()：当用户点击表单提交按钮时，需要调用该方法进行表单提交操作form.validate()：当需要手动对表单进行验证时，需要调用该方法进行验证
当表单验证通过并点击提交按钮时，会调用 submit 属性所指定的回调函数，该函数会接收表单中所有字段的值，以一个对象的形式返回。
创建验证器
formulary.createValidator(...) 方法用于创建验证器，可以用于对单个字段的验证，也可以用于多个字段之间的验证。下面是一个例子：
-- -------------------- ---- -------
----- -------------- - ------- ------- -- -
------ ------------ --- -------
--
----- --------- - ---------------------------
--------- ----- -- -
-- ----------------------- --- -
------ ------
-
-- ------------------------ -
------ ------
-
-- ------------------------ -
------ ------
-
-- ------------------------ -
------ ------
-
------ -----
--
---------------- ------- --------- -- -
------ ----- --- ------------------
-
---上述代码定义了两个验证器，分别是 password 和 confirmPassword。其中 password 验证器对密码字段进行了强度验证，包括长度、大小写和数字组合等。而 confirmPassword 验证器则对确认密码字段进行了验证，判断确认密码是否与密码相同。
示例
在以下代码示例中，我将创建一个注册表单，包括用户名、密码和确认密码等字段，同时对这些字段进行验证。
-- -------------------- ---- -------
------ - -- --------- ---- ------------
----- -------------- - ------- ------- -- -
------ ------------ --- -------
--
----- --------- - ---------------------------
--------------- ----- -- -
------ ------------------ -- -- ------- ------
--
--------- ----- -- -
-- ----------------------- --- -
------ ------
-
-- ------------------------ -
------ ------
-
-- ------------------------ -
------ ------
-
-- ------------------------ -
------ ------
-
------ -----
--
---------------- ------- --------- -- -
------ ----- --- ------------------
-
---
----- ------ - -
--------- -
------ ------
----- -------
--------- -----
---------- -
--------------- -----
---------- --
---------- --
-
--
--------- -
------ -----
----- -----------
--------- -----
---------- -
--------- ----
-
--
---------------- -
------ -------
----- -----------
--------- -----
---------- -
---------------- ----
-
-
--
----- ---- - ----------------------
-------
--------- ------ -------- -- -
---------
---------------
-------- -- ----------
------------- -- -----------------
--
------- ---- -- -
------------------
-
---
------------------------- ------------
------------------------- ------------
-------------------------------- ------------
----------------上述代码中，我定义了表单字段、表单验证器和表单对象，并通过 form.onChange(...) 方法为每个表单字段设置了一个默认值。然后我通过 form.onSubmit() 方法进行表单提交操作，此时如果表单验证通过，则会触发表单提交回调函数，并将表单中所有字段的值输出至控制台中。
总结
formulary 是一个非常优秀的 npm 包，它提供了丰富的验证器和自定义组件，使得表单开发变得更加简单和直观。通过本篇文章的介绍，相信大家已经对其使用有了更深的了解，希望能够对大家在前端开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b4ac6eb7e50355dbfbe