在前端开发中，前端验证是非常常见的需求。常规的验证方式有 HTML5 的表单验证和手动验证，但是这些验证方式往往不能满足需求的复杂度，比如需要实现异步验证或自定义规则验证。
这时候，我们可以使用一个比较流行的前端验证库 @fimbul/valtyr。
安装
在开始之前，你需要确定你已经安装了 npm。在终端中进入你的项目路径，执行以下命令进行安装：
--- ------- -------------- ------
使用
安装完成之后，在项目中引入 Library：
------ ------ ---- -----------------
初始化
在需要进行验证的表单或组件的 JS 中，我们需要先进行 Valtry 的初始化。
----- --------- - --- --------
----------- -
--------------- -------- -
-- ------------- --- ---------- -- ------------ --- -------- -
------ ---------------------
-
-- ------ --- --------- -- ----- --- ----- -
------ ------
-
------ ---------------------
-
-
---在初始化 Valtyr 的时候，有个 strategies 的参数，这个参数用于定义你要用到的验证策略。Valtyr自带了一些基本策略用于验证，如果你需要自定义一些验证策略则可以将你需要的策略写在 strategies 中进行注册。
规则
在执行验证之前，我们还需要定义一些验证规则，规则包括需要验证的表单元素，以及对应的验证策略和错误提示信息等。
----- ----- - -
------------ -
--------- -----
---------- --
--------- -
--------- ------ ---- -- ----------
---------- ------ ---- ---- ---- -- ----- - -----------
-
--
-------- -
--------- -----
------ -----
--------- -
--------- ------- -- ----------
------ ------- ------ -- --------
-
-
--上面这个对象中，我们定义了两个验证规则，一个是验证名字是否为空并且长度不少于 2 个字符，另一个是验证邮箱是否为空并且是一个合法的邮箱格式。
验证
在初始化 Valtyr 并定义了规则之后，我们就可以开始对表单进行验证了，我们可以通过下面的代码进行验证：
-------------------------- ------ -------- -- - -- -------------- ------ ------------------- ---
在验证函数中，我们需要提供表单数据、验证规则和回调函数，回调函数中将会返回验证结果，如果成功则返回空对象；如果失败则返回一个包含错误信息的对象。
接下来我们就可以在回调函数里面对验证结果进行处理了。
总结
Valtry 是一个非常好用的前端验证库，在我们日常的前端开发中经常会用到，可以非常方便地处理复杂的验证需求。本教程将 Valtry 的安装、初始化、规则定义及验证过程详细介绍，希望对初学者有帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eeda9f5b5cbfe1ea06102ed