npm 包 reactive-json-schema 使用教程

在前端开发中，我们经常需要对数据进行验证和转换。前端工程师们大多使用 JSON Schema 进行数据验证，但是 JSON Schema 在复杂业务场景下存在一些问题，具体表现为数据模型难以维护、对数据变化感知能力不强等。

这时，我们可以使用 npm 包 reactive-json-schema 进行数据验证和转换。reactive-json-schema 包提供了一种声明性的方式，用于定义数据模型、验证和转换数据。本文将介绍 npm 包 reactive-json-schema 的使用方法。

安装

在使用 reactive-json-schema 前，我们需要将其安装到项目中。使用 npm 包管理工具进行安装：

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

引入

在需要使用 reactive-json-schema 的文件中，我们需要引入 reactive-json-schema：

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

示例

考虑下面这个示例：

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

在对模型进行定义后，我们就可以使用各种命令进行数据的验证和转换：

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

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

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

在上面的示例中，我们成功地对数据进行了验证和转换。接下来，我们将对 reactive-json-schema 的使用方法进行详细讲解。

定义模型

在 reactive-json-schema 中，我们可以使用 create 命令创建数据模型：

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

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

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

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

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

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

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

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

    ---
  -
--

在模型的定义中，我们可以指定模型的名称、类型和属性，并对每个属性指定验证规则和转换规则。在 reactive-json-schema 中，我们支持多种内置验证规则和转换规则，同时也支持自定义验证规则和转换规则。

下面，我们将详细讲解内置的验证规则和转换规则。

验证规则

在 reactive-json-schema 中，我们支持多种内置的验证规则，如下所示：

类型

type 指定属性的类型。具体的类型如下所示：

  • string 字符串类型
  • number 数值类型
  • integer 整数类型
  • boolean 布尔类型
  • object 对象类型
  • array 数组类型
  • null 空类型

必填

required 表示属性是否必填。

默认值

default 表示属性的默认值。

长度

length 规则用于验证字符串的长度是否符合要求。具体的选项如下所示：

  • min 最小长度
  • max 最大长度

正则表达式

pattern 规则用于验证字符串是否符合正则表达式的要求。

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

字符串模式

format 规则用于验证字符串是否符合某种模式。

具体的模式如下所示：

  • date 验证日期字符串
  • time 验证时间字符串
  • datetime 验证日期时间字符串
  • email 验证邮箱地址字符串
  • url 验证 URL 字符串
  • host 验证主机名字符串
  • ip 验证 IP 地址字符串
  • phone 验证电话号码字符串
  • zip 验证邮编字符串

数值范围

range 规则用于验证数值是否在指定范围内。具体的选项如下所示：

  • min 最小值
  • max 最大值

数组元素个数

items 规则用于验证数组的元素个数是否符合要求。

具体的选项如下所示：

  • minItems 最小元素个数
  • maxItems 最大元素个数

数组元素类型

itemsType 规则用于验证数组的元素是否符合指定的类型。具体使用方法如下所示：

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

上面示例中，我们定义了一个数组属性，其中元素类型为字符串。

自定义验证规则

除了上述内置的验证规则之外，我们还可以定义自己的验证规则。定义一个规则需要以下几个参数：

  • name 验证规则的名称
  • validate(data, options) 验证函数，如果验证成功，返回 true 或 undefined，否则返回一个字符串类型的错误消息
  • message(error, options) 错误消息函数，接收一个 error 对象和 options 参数，返回一个字符串类型的错误消息

下面是一个自定义验证规则的示例：

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

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

在上面的示例中，我们定义了一个自定义的验证规则：unique。在这个规则中，我们使用 validator 对象访问了整个数据模型，并在其中寻找了相同的 test 属性。如果找到了相同的属性，并且值不等于当前值，我们就会返回一个错误消息。

转换规则

在 reactive-json-schema 中，我们支持多种内置的转换规则，如下所示：

字符串处理

  • trim 去掉字符串的两端空格
  • ltrim 去掉字符串的左端空格
  • rtrim 去掉字符串的右端空格
  • toUpperCase 将字符串变成大写
  • toLowerCase 将字符串变成小写

数组处理

  • array 将非数组数据转换为数组（如果为空，则分配空数组）

数字处理

  • round 将数字进行四舍五入
  • ceil 将数字进行向上取整
  • floor 将数字进行向下取整

字符串处理

  • md5 对字符串进行 MD5 哈希
  • sha1 对字符串进行 SHA1 哈希
  • sha256 对字符串进行 SHA256 哈希
  • sha512 对字符串进行 SHA512 哈希

下面是一个自定义转换规则的示例：

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

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

在上面的示例中，我们定义了一个自定义的转换规则：uppercase。在这个规则中，我们将字符串的值转换为大写。

创建数据

在 reactive-json-schema 中，我们可以使用 create 命令创建一个新的数据对象。

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

在创建数据的过程中，我们需要传入一个与模型匹配的初始数据对象。在创建数据的同时，reactive-json-schema 会对数据进行验证和转换。

验证数据

在 reactive-json-schema 中，我们可以使用 validate 命令验证数据是否合法。如果验证成功，该命令返回一个包含 success、errors 和 warnings 属性的对象：

  • success 表示验证是否成功
  • errors 表示当前数据对象中所有错误的属性
  • warnings 表示当前数据对象中所有警告的属性
----- ---------------- - --------------------

转换数据

在 reactive-json-schema 中，我们可以使用 convert 命令对数据进行转换。如果转换成功，该命令返回一个转换后的数据对象：

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

到这里，我们已经学习了 npm 包 reactive-json-schema 的基本用法，包括安装、引入、定义模型、创建数据、验证数据和转换数据等。

希望读者通过本文可以了解到 npm 包 reactive-json-schema 的用法，并在实际开发中灵活运用其中的各种特性，提高开发效率。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f9d9381d61a3540fc8

阅读全文

猜你喜欢

  • npm 包 clippings-service 使用教程

    前言 在前端开发中，我们经常会需要进行字符串截取、文字缩略、去除空格等等操作，而这些操作在很多场景下都是很重要的。为了避免每次都需要从头开始写这些操作的代码，我们可以使用 clippings-serv...

    3 年前
  • npm 包 ucm-sql-cli 使用教程

    什么是 ucm-sql-cli？ ucm-sql-cli 是一个使用命令行方式操作数据库的工具。它基于 Node.js 开发，可以直接安装在本地，并且支持多种数据库类型和操作方式。

    3 年前
  • NPM 包 buc-select 使用教程

    简介 buc-select 是一款基于 Vue.js 的下拉框组件，可用于快速实现下拉选项列表的构建。它提供了多种选项自定义配置，并支持异步加载。 安装 安装该组件最简单的方法是使用 Node.js ...

    3 年前
  • npm 包 change-version 使用教程

    在开发前端项目时，我们常常需要使用第三方库来提高我们的开发效率。而这些第三方库可能会随着时间的推移进行更新，其中版本号的变更是非常必要的。而 change-version 就是一个可以帮助我们快速更改...

    3 年前
  • npm 包 @redux-orchestrate/react-redux 使用教程

    简介 @redux-orchestrate/react-redux 是一个 React-Redux 库，他可以帮助我们更好的集成 React 与 Redux。 安装 要使用 @redux-orches...

    3 年前
  • npm 包 builder-t 使用教程

    在前端开发中，我们经常会需要编写大量的代码，而这些代码往往需要经过合并、压缩等操作才能部署到生产环境中。此时，一个好用的构建工具是必不可少的。 在众多的构建工具中，builder-t 是一个基于 Gu...

    3 年前
  • npm 包 fs-gulp-tmtsprite 使用教程

    前言 在前端开发中，图片的优化是非常重要的一环，其中 CSS Sprite 技术是常用的优化手段之一。fs-gulp-tmtsprite 是一款基于 gulp 的自动化 CSS Sprite 工具，可...

    3 年前
  • npm包 bigroom-react-chrome-extension 使用教程

    npm包 bigroom-react-chrome-extension 使用教程 在Web开发中，大多数项目都需要使用前端框架来构建网站。但在开发过程中，还需要一些额外的工具来实现特定的功能。

    3 年前
  • npm 包 @mautematico/redis-info 使用教程

    redis 是一种高性能的 key-value 存储系统，常被用来作为缓存。而 @mautematico/redis-info 这个 npm 包则提供了一个快速获取某个 redis 实例的信息的方式。

    3 年前
  • npm 包 bigroom-vue-chrome-extension 使用教程

    前言 Chrome 扩展程序是 Chrome 浏览器的一种拓展，可以添加新功能、改变外观或者实现某些网站的自动化操作。使用 Vue.js 开发 Chrome 扩展程序，可以更快速、高效地构建一个功能完...

    3 年前
  • npm 包 bplokjs 使用教程

    在开发前端项目时，我们经常需要进行 DOM 元素的定位和操作，而这时候 bplokjs 就是一个非常有用的 npm 包。bplokjs 是一个使用 JavaScript 封装了 puppeteer A...

    3 年前
  • npm 包 markov-json 使用教程

    什么是 markov-json Markov-json 是一个基于 Markov 链生成随机文本的 Node.js 包。使用该包可以生成类似于所提供的文本文件的随机文本。

    3 年前
  • npm 包 tencent-wx-jssdk 使用教程

    tencent-wx-jssdk 是腾讯开放平台提供的基于微信 JS SDK 的前端工具包，它提供了更加方便的微信 JSSDK 使用方式和更加简洁的 API 接口，同时其支持 TypeScript，使...

    3 年前
  • npm 包 remote-select 使用教程

    前言 在前端开发中，我们经常会用到下拉框选择框等多种表单控件。其中，remote-select 是一种方便快捷的控件，可以实现远程获取数据并选择的功能。在本教程中，我们将讲解如何使用 npm 包 re...

    3 年前
  • npm 包 node-unihan-etl 使用教程

    node-unihan-etl 是一个基于 Node.js 的 npm 包，它可以帮助开发者在前端项目中轻松地使用 UNIHAN 数据库中的中文字符。本文将介绍如何使用 node-unihan-etl...

    3 年前
  • npm 包 crud-ajax-simples 使用教程

    前言 在前端开发中，我们经常会用到 AJAX 技术，用于与后端服务器进行数据交互。而使用 AJAX 进行 CRUD 操作的场景也是经常出现的，比如我们需要对用户信息、商品信息等进行增删改查。

    3 年前
  • npm 包 @bon3s/input-validation 使用教程

    在前端开发中，输入验证是一个关键的过程。为了提高前端开发的效率和减少重复工作，可以通过使用 npm 包减少输入验证的代码编写。其中一个方便的 npm 包就是 @bon3s/input-validati...

    3 年前
  • npm 包 netcat-repl 使用教程

    在前端开发中，我们经常需要使用命令行工具来进行一些操作，例如启动服务、打包代码等等。而 netcat-repl 就是一个非常便捷的命令行工具，它可以让我们在命令行中直接与服务器进行交互，而无需打开一个...

    3 年前
  • npm 包 bbs-graphql-iso-date 使用教程

    简介 在现代 Web 应用中，时间戳是非常常见的数据类型。而在 GraphQL 中，日期和时间是以 ISO 格式呈现的。因此，将日期和时间转换成 ISO 格式是很常见的任务，而 bbs-graphql...

    3 年前
  • npm 包 ckeditor5-supsub 使用教程

    介绍 CKEditor5 是一款现代化的富文本编辑器，可以在 Web 应用程序中的任何位置使用。CKEditor5-supsub 是 CKEditor5 中的一个子包（subpackage），用于添加...

    3 年前

相关推荐

    暂无文章