npm 包 @formily/validator 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，表单验证是我们不可避免的一个步骤。为了简化表单验证的流程，现在市面上也崛起了许多优秀的表单验证框架。其中，@formily/validator 非常出色，它支持多种验证规则、异步验证和自定义验证函数。

本文将详细介绍 @formily/validator 的使用方法，帮助您快速进行表单验证的开发。

安装

您可以使用 npm 或 yarn 安装 @formily/validator

npm install @formily/validator --save

或

yarn add @formily/validator

基本使用

导入 @formily/validator

import { createValidator } from '@formily/validator'

创建验证器函数

const validator = createValidator({
  required: { message: '该字段为必填项' },
  email: { message: '该字段必须为邮箱格式' },
  min: { message: '该字段长度必须大于等于 {0}', format: (length) => [length] },
  max: { message: '该字段长度必须小于等于 {0}', format: (length) => [length] },
  pattern: { message: '该字段不符合正则表达式 {0}', format: (pattern) => [pattern] }
})

对表单数据进行验证

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

验证规则

@formily/validator 支持以下验证规则:

required

const validator = createValidator({
  required: { message: '该字段为必填项' }
})

email

const validator = createValidator({
  email: { message: '该字段必须为邮箱格式' }
})

url

const validator = createValidator({
  url: { message: '该字段必须为url格式' }
})

number

const validator = createValidator({
  number: { message: '该字段必须为数字类型' }
})

integer

const validator = createValidator({
  integer: { message: '该字段必须为整数类型' }
})

float

const validator = createValidator({
  float: { message: '该字段必须为浮点数类型' }
})

max

const validator = createValidator({
  max: { message: '该字段长度必须小于等于 {0}', format: (length) => [length] }
})

min

const validator = createValidator({
  min: { message: '该字段长度必须大于等于 {0}', format: (length) => [length] }
})

len

const validator = createValidator({
  len: { message: '该字段长度必须为 {0}', format: (length) => [length] }
})

pattern

const validator = createValidator({
  pattern: { message: '该字段不符合正则表达式 {0}', format: (pattern) => [pattern] }
})

自定义验证规则

您可以使用 validators 函数，创建自定义规则。 validators 函数接受一个函数作为参数，这个函数接受一个值和上下文对象作为参数，并返回一个 boolean 值，表明该值是否是合法的。

下面的例子中，我们创建了一个名叫 phone 的验证规则，它要求输入的字符串必须是一个中国手机号码。

const validator = createValidator({
  phone: ({ message: '该字段必须为中国手机号码' }, (value) => {
    return /^1[3456789]\d{9}$/.test(value)
  })
})

异步验证

有时候，对于一些验证规则，我们无法立即得出结果，这时候我们需要使用异步验证。目前 @formily/validator 支持使用 Promise 进行异步验证。

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

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

验证器之间的关系

在实际的表单验证中，一个表单可能会有多个验证规则，而这些规则可能存在互斥或依赖的关系。在这种情况下，我们需要对验证器之间建立关系。

例如，在一个邮箱注册表单中，我们需要同时验证邮箱是否已存在，并且验证邮箱格式是否正确。这时候我们就需要使用到关系。

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

总结

到目前为止，我们已经介绍了 @formily/validator 的使用方法、验证规则和自定义验证规则、异步验证和关系的建立。相信有了这些知识，你已经可以快速地开发一个支持多种验证规则的表单验证功能了。

示例代码：

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

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

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

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

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

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

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

npm 包 @formily/validator 使用教程

安装