npm 包 Uran 使用教程

阅读时长 5 分钟读完

NPM(Node Package Manager)是 Node.js 的包管理工具,这里介绍一款在前端开发中很常用的 npm 包 —— Uran。Uran 是一款轻量级的表单数据验证工具,它支持异步验证,多种内置的验证规则,并且扩展性也很强。

安装

可以使用 NPM 进行 Uran 的安装:

安装完之后,就可以在项目中使用 Uran 了。

基本使用

导入 Ural

设置验证规则

这里我们定义了两个规则,email 和 password。email 需要满足必填和邮箱格式的要求,password 需要满足必填和最小长度为6的要求。

创建 Uran 实例

创建 Uran 实例后,就可以在表单中使用它进行验证了。

调用 validate 方法验证数据

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

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

调用 validate 方法验证数据时,需要传入需要验证的数据和一个回调函数。回调函数中会返回验证结果。如果验证通过,则 errors 参数为 null 或 undefined。

异步验证

如果需要异步验证,可以使用 Promise:

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

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

在这个示例中,我们在 setTimeout 中模拟了一秒钟的异步请求,然后再调用 validate 方法进行验证。

高级用法

使用自定义规则

Uran 可以简单的定义自己的验证规则,只需将下面简单的验证函数添加到规则中即可。

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

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

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

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

在这个示例中,我们创建了一个自定义的规则 custom_rule,它的 validator 函数的返回值必须为 true 才算验证通过,否则会返回一个 message。

自定义错误消息

在 rules 中定义规则时,可以设置一个 messages 字段,用于自定义错误提示消息。messages 字段是一个对象,其中 key 为字段名,value 为一个对象,包含每个验证规则的错误提示信息。

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

在这个示例中,我们设置了两个字段 email 和 password 的错误提示信息,分别对应了 email 和 password 的所有验证规则。

结论

在前端开发中,表单数据验证是必不可少的。Uran 轻量且易于使用,还具有高度的可扩展性。通过此篇文章的介绍,你已经可以开始使用 Uran 进行表单数据验证了。同时,Uran 源码开放,如果需要更多的扩展,可以自行对 Uran 进行二次开发。

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

纠错
反馈