npm 包 inc-validation 使用教程

阅读时长 9 分钟读完

简介

inc-validation 是一个用于表单验证的 npm 包。它提供了一系列的验证器，并且支持自定义验证器，能够用于验证输入表单中的数据的格式、正确性和合法性。使用 inc-validation 可以使得表单验证变得简单、高效。

安装

inc-validation 可以通过 npm 安装：

使用方法

使用 inc-validation 的方法非常简单：

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

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

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

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

在上面的代码中，我们通过 addValidator 函数添加了一个验证器，它的名称为 username，它的验证规则为英文字母、数字、下划线组成，且开头必须为字母或下划线。

然后，在 validate 函数中，我们验证了一个包含 username 字段的表单数据，该字段需要遵循如下两项验证规则：

  • 必填，即不能为空
  • 符合上面添加的 username 规则

validate 函数返回一个 Promise，它可以通过 await 关键字来等待结果。结果是一个对象，包含验证结果和错误信息。在上面的例子中，由于输入的用户名符合规则，所以验证结果是 { valid: true, errors: {} }。

其中 valid 的值表示验证是否通过，如果已通过则为 true，否则为 false； errors 的值为一个对象，如果有错误，则该对象包含错误信息，如果没有错误则该对象为空对象 {}。

验证规则

inc-validation 支持多种预设的验证规则，包括：

  • required 必填，即不能为空
  • email 邮箱格式
  • phone 手机号格式
  • alpha 只能为英文字母
  • alphanumeric 只能为英文字母、数字
  • numeric 只能为数字
  • integer 只能为整数
  • float 可以为小数
  • url URL 格式
  • minLength 最小长度
  • maxLength 最大长度
  • pattern 正则表达式格式匹配

可以通过 addValidator 函数添加自定义规则。

每个验证规则都有支持以下两个参数：

  • rule - 规则名称，必填
  • message - 错误信息，必填

addValidator 函数有如下三个参数：

  • name - 规则名称，必填
  • validator - 验证器函数，必填。该函数接收一个参数（即需要验证的值），如果验证通过，则返回 undefined 或空字符串; 如果验证不通过，则返回错误信息。
  • message - 错误信息模板，可选。该参数是一个函数，用于格式化错误信息。如果没有指定，则默认为 'Invalid value for field "${field}".'。

示例代码

下面是一个使用 inc-validation 验证表单的完整示例代码：

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

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

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

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

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

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

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

在上面的示例代码中，我们定义了一个包含多个表单字段的表单，每个字段都有多项验证规则。当提交表单时，会通过 inc-validation 验证表单数据。如果验证通过，则会发起提交请求；如果验证不通过，则会在相应表单字段下显示错误信息。

总结

inc-validation 是一个非常方便的表单验证 npm 包，它提供了多种预设的验证规则，并且可以方便地添加自定义规则。当我们需要验证表单数据的时候，它可以帮助我们更加简单、高效地完成表单验证，减少代码量，提升开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb981e8991b448dc6c3

纠错
反馈
相关推荐
精选内容