在前端开发中，我们经常需要处理表单数据，而表单数据的校验则是其中一个非常重要的环节。最近，我在 npm 上发现了一个非常好用的表单验证库 @allmarkedup/fang，今天我将和大家分享如何使用它。
安装
在使用 @allmarkedup/fang 之前，我们需要先将它安装到我们的项目中。可以通过 npm 命令来安装：
npm install @allmarkedup/fang
初始化
安装完成后，我们需要在代码中导入 @allmarkedup/fang。可以通过以下代码实现：
import fang from '@allmarkedup/fang';
接下来，我们需要为每一个需要校验的表单元素指定校验规则。我们可以通过链式调用 fang 提供的方法实现：
-- -------------------- ---- -------
----- ------ - -----------------------
----------------------
------------ -------- --------- --
------
----------------------
------------ - -------- ---------------- --
------------- - -------- ----------------- --
-------------- - -------- ---------- --
-------------------- - -------- ---------- --
------
------------上面的代码中，我们为用户名和密码分别设置了不同的校验规则。其中 isPresent、isMinLen、isMaxLen 和 matches 都是 fang 提供的验证方法。
校验结果
当我们调用 validate 方法时，fang 会返回一个包含校验结果的对象，其中包括了每一个表单元素是否校验通过以及错误提示信息：
-- -------------------- ---- -------
-
----------- -
---------- -----
---------- ----
--
----------- -
---------- ------
---------- ----------------
-
-上面的结果表明，用户名校验通过，而密码校验不通过，错误提示信息为 “密码长度必须大于等于8个字符”。
我们可以根据上面的结果对表单中的错误信息进行处理，例如：
const errors = Object.keys(result).filter(field => !result[field].isValid).map(field => result[field].message);
if (errors.length) alert(errors.join('\n'));上面的代码会通过 alert 弹窗将错误信息逐一展现出来。
示例代码
下面是一个完整的示例代码，其中包括了 input 和 button 两个表单元素，点击按钮可以触发表单校验并将错误信息展示出来。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------ ----------
-------
------
----- ------------
---
-------
----
------ ----------- -----------------
--------
----
---
-------
---
------ --------------- -----------------
--------
----
---
------- ------------- ------------------------------------
----
-------
------- ---------------------------------------------------------
--------
-------- -------------- -
----- ---- - ----------------------------------
----- ------ - ----------
----------------------
------------ -------- --------- --
------
----------------------
------------ - -------- ---------------- --
------------- - -------- ----------------- --
-------------- - -------- ---------- --
-------------------- - -------- ---------- --
------
------------
----- ------ - -------------------------------- -- --------------------------------- -- -----------------------
-- --------------- -------------------------
-
---------
-------
-------总结
通过本文的介绍，我们了解了如何使用 @allmarkedup/fang 进行表单数据校验。@allmarkedup/fang 不需要过多的配置就可以快速地进行表单数据校验，这让我们在开发中能够更加高效地处理表单数据校验的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/158060