在开发前端项目的过程中，我们经常需要处理用户输入的数据，这时候对数据进行合法性校验就显得尤为重要了。要实现合法性校验，我们可以使用一些现有的库，比如 jQuery Validate 或者 Validator.js。不过，这些库的体积较大，很多时候只需要简单的校验规则，使用这些库显得有些浪费。
而 forcible 就是一个可以轻松解决这个问题的 npm 包。它是一个超轻量级的表单校验库，支持自定义校验规则，可以根据需要进行快速的自定义设置。在本文中，我们将详细介绍 forcible 的使用方法。
安装：
在安装 forcible 之前，我们需要先安装 Node.js。安装完成之后，我们可以通过以下命令来安装 forcible ：
--- ------- -------- ------
使用方法：
引入 forcible
在使用 forcible 之前，我们需要先引入它。我们可以使用以下代码将它引入到项目中：
----- -------- - --------------------
基本使用
----- --------- - -------------------
----- ----- - -
---- -
-
----- ----------
-------- ---------
--
-
----- ------
------ ---
-------- --------------
--
-
----- ------
------ ---
-------- -----------
-
--
------ -
-
----- --------
-------- ---------
-
--
--------- -
-
----- ------------
------ --
-------- ------------
-
-
--
----- ---- - -
---- -----
------ -------------------
--------- -----
--
----- ------ - ------------------------- ------
--------------------在上述代码中，我们首先定义了三种规则：年龄、邮件和密码。然后我们定义了一个数据对象，其中包含了三个属性 age、email 和 password。
使用 validator.validate(rules, data) 函数进行数据验证。如果数据校验通过，则返回一个空对象（ {} ）。如果数据校验不通过，则会返回一个以属性名为 key，每条不通过校验规则的信息组成的数组为 value 的对象。
以上面的数据为例，输出结果如下：
-
---- -
-
----- ------
-------- -----------
-
--
--------- -
-
----- ------------
-------- ------------
-
-
-自定义规则
我们可以自定义规则来满足特定业务的需求。例如，我们需要校验某一字符串的长度是否等于特定长度：
---------------------------------- ------- ------- -- -
-- ------------- --- ------- -
------ --------------------
-
---
----- ----- - -
----- -
-
----- --------------
------ --
-------- ------------
-
-
--在上述代码中，我们首先使用 forcible.defineRule() API 来定义了一个长度校验规则。然后我们定义了一个规则对象，在对象中包含了要校验的属性 code。需要注意的是，我们在规则对象中定义的 type 和明确定义的 exactLength 相对应。
在运行完上述代码之后，你就可以使用该规则来校验你的数据了。示例代码如下：
----- ---- - -
----- -------
--
----- ------ - ------------------------- ------
--------------------运行以上代码之后，你会得到以下输出：
-
------- -
-
------- --------------
-------- --
---------- ------------
-
-
-异步规则
在某些情况下，校验规则可能需要异步验证。例如，我们需要校验一个用户名是否已经被占用：
------------------------------- ------- -- -
------ --- ----------------- ------- -- -
-- --------------------
------------- -- -
----- ----------------- - --------- ----------
-- --------------------------------- --- --- -
------ ---------------- -------
-
----------
-- ------
---
---
----- ----- - -
--------- -
-
----- -----------
-------- ----------
-
-
--在上述代码中，我们使用 Promise 来模拟了一个异步请求获取已占用的用户名。在规则函数中，如果输入的用户名已占用，则会 reject 该 Promise，并传递错误消息；如果未被占用，则会 resolve 该 Promise。
在运行完上述代码之后，你就可以使用该规则来校验你的数据了。示例代码如下：
----- ---- - -
--------- -------
--
----- ------ - ----- ------------------------------ ------
--------------------运行以上代码之后，你会得到以下输出：
-
----------- -
-
------- -----------
---------- ----------
-
-
-复杂表单数据的校验
在上面的例子里，我们只是校验了简单的数据。但在实际开发中，经常需要校验复杂的表单数据。我们可以对每个表单项都单独设置校验规则，但这样显然不是最好的选择。forcible 提供了更加灵活的表单校验方法，可以轻松地设置复杂的规则。
----- ----- - -
--------- -
----- -
-
----- --------
-------- ---------
-
--
---- -
-
----- ----------
-------- ---------
--
-
----- ------
------ ---
-------- --------------
--
-
----- ------
------ ---
-------- -----------
-
-
--
-------- -
------ -
-
----- --------
-------- ---------
-
--
------ -
-
----- --------
-------- ----------
-
-
--
--------- -
-
----- ------------
------ --
-------- ------------
-
-
--
----- ---- - -
--------- -
----- -------
---- ----
--
-------- -
------ -------------------
------ -------------
--
--------- -----
--
----- ------ - ------------------------- ------
--------------------在上述代码中，我们定义了一个复杂的规则对象。规则对象包含了三个属性：个人信息、联系方式和密码。每个属性都包含了多个表单项，同时每个表单项都有自己的校验规则。
在运行完以上代码之后，你会得到以下输出：
-
----------- -
------- ---
------ --
--
---------- -
-------- ---
-------- -
-
------- --------
---------- ----------
-
-
--
----------- -
-
------- ------------
---------- ------------
-
-
-表单实时校验
我们还可以在用户输入表单的过程中进行实时校验。下面是一个简单的实现方式：
----- --------- - -------------------
----- ----- - -
------ -
-
----- --------
-------- ------------
-
-
--
----- -------- - ---------------------------------
--- --------
-------- -------------- -
----- ----- - ---------------
----------------------
------- - ------------- -- -
----- ------ - ------------------------- - ------ ----- ---
--------------------
-- -----
-
---------------------------------- --------------在上述代码中，我们在用户输入过程中监听 input 事件。当用户输入的时候，我们使用 setTimeout() 函数进行延迟处理，等待 500 毫秒之后再进行校验。这样可以有效地减少校验需要的资源和时间，提高性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668efd9381d61a3540d31