npm 包 async-validator 使用教程

阅读时长 5 分钟读完

async-validator 是一个轻量级的校验库,用于前端表单校验。该库支持 Promise 和 async/await 语法,并提供了丰富的校验规则和自定义消息。

安装

可以使用 npm 或 yarn 来安装 async-validator:

示例

下面是一个示例代码:

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

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

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

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

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

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

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

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

------ ------- ---------------------
展开代码

在上述代码中,我们使用了 async-validator 来校验表单输入。其中 rules 属性用于指定校验规则和自定义消息。

校验规则

下面是一些常见的校验规则:

  • required: 必填项
  • pattern: 正则表达式
  • type: 类型(支持 string、number、boolean、method、regexp、integer、float、array、object、enum、date、url、hex、email)
  • range: 数字范围
  • length: 字符串长度范围
  • whitespace: 是否只包含空白字符

更多详细的校验规则可以查看官方文档。

自定义消息

除了使用默认的错误消息,我们还可以通过 message 属性来指定自定义的错误消息。例如:

-- -------------------- ---- -------
-
  --------- -
    -------- ------
  --
  -------- -
    -------- --------
  --
  ----- -
    -------- --------
  --
-
展开代码

异步校验

async-validator 还支持异步校验。例如:

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

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

-------------------- ------ --------------------- -- -------- ------- -- -
  --------------------
---
展开代码

上述代码中,我们使用异步函数进行服务器端校验,并在校验完成后调用 callback 回调函数返回结果。

总结

async-validator 是一个强大的前端表单校验库,提供了丰富的校验规则和自定义消息。通过本文的介绍,您应该已经学会了如何使用 async-validator 来校验表单输入,以及如何编写自定义的校

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

纠错
反馈

纠错反馈