npm 包 @fimbul/valtyr 使用教程

阅读时长 3 分钟读完

在前端开发中,前端验证是非常常见的需求。常规的验证方式有 HTML5 的表单验证和手动验证,但是这些验证方式往往不能满足需求的复杂度,比如需要实现异步验证或自定义规则验证。

这时候,我们可以使用一个比较流行的前端验证库 @fimbul/valtyr。

安装

在开始之前,你需要确定你已经安装了 npm。在终端中进入你的项目路径,执行以下命令进行安装:

使用

安装完成之后,在项目中引入 Library:

初始化

在需要进行验证的表单或组件的 JS 中,我们需要先进行 Valtry 的初始化。

-- -------------------- ---- -------
----- --------- - --- --------
  ----------- -
    --------------- -------- -
      -- ------------- --- ---------- -- ------------ --- -------- -
        ------ ---------------------
      -
      -- ------ --- --------- -- ----- --- ----- -
        ------ ------
      -
      ------ ---------------------
    -
  -
---

在初始化 Valtyr 的时候,有个 strategies 的参数,这个参数用于定义你要用到的验证策略。Valtyr自带了一些基本策略用于验证,如果你需要自定义一些验证策略则可以将你需要的策略写在 strategies 中进行注册。

规则

在执行验证之前,我们还需要定义一些验证规则,规则包括需要验证的表单元素,以及对应的验证策略和错误提示信息等。

-- -------------------- ---- -------
----- ----- - -
  ------------ -
    --------- -----
    ---------- --
    --------- -
      --------- ------ ---- -- ----------
      ---------- ------ ---- ---- ---- -- ----- - -----------
    -
  --
  -------- -
    --------- -----
    ------ -----
    --------- -
      --------- ------- -- ----------
      ------ ------- ------ -- --------
    -
  -
--

上面这个对象中,我们定义了两个验证规则,一个是验证名字是否为空并且长度不少于 2 个字符,另一个是验证邮箱是否为空并且是一个合法的邮箱格式。

验证

在初始化 Valtyr 并定义了规则之后,我们就可以开始对表单进行验证了,我们可以通过下面的代码进行验证:

在验证函数中,我们需要提供表单数据、验证规则和回调函数,回调函数中将会返回验证结果,如果成功则返回空对象;如果失败则返回一个包含错误信息的对象。

接下来我们就可以在回调函数里面对验证结果进行处理了。

总结

Valtry 是一个非常好用的前端验证库,在我们日常的前端开发中经常会用到,可以非常方便地处理复杂的验证需求。本教程将 Valtry 的安装、初始化、规则定义及验证过程详细介绍,希望对初学者有帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eeda9f5b5cbfe1ea06102ed

纠错
反馈