npm 包 vz-rn-joi 使用教程

简介

vz-rn-joi 是一个为 React Native 应用提供数据校验的 npm 包。它基于 joi 数据校验库,提供了一些专门针对 React Native 的校验规则和可定制化的错误提示机制,旨在帮助开发者更方便地进行输入合法性校验。

安装

通过 npm 安装:

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

如果你使用的是 yarn,也可以通过以下方式安装:

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

使用

初始化

在应用入口处,需要首先初始化 joi,例如在 App.js 中:

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

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

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

其中,Joi 是 joi-browser 库的实例,initJoi 的第二个参数可以传递一个可选的配置对象。在本例中,我们传递了一个自定义验证函数的对象 CustomValidators。

定义校验规则

在需要进行校验的组件中,我们可以通过定义一个校验规则对象实例化一个 validator。

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

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

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

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

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

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

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

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

在上面的示例中,我们首先定义了一个包含 email 和 password 两个字段的校验规则,在 handleLogin 函数中,通过 validator.validate 方法进行校验,并根据返回结果进行处理。

该示例中的校验规则比较简单,但是 joi 提供了非常多的校验方法,建议在编写校验规则时充分利用 joi 内置的校验方法,避免“重复造轮子”。

同时,我们可以通过调用 validator.update 方法更新校验规则,例如添加或删除某些校验规则,这样可以动态改变输入框的校验规则。

自定义错误提示

在上面的示例中,我们是通过访问 validationResult.error.details[0].message 来获取错误提示信息的。但是对于一些复杂的应用场景,这种错误提示可能并不具有足够的灵活性。

这时候,我们可以通过传递一个 errorMessages 参数来自定义错误提示信息。例如:

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

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

上面的示例中,我们通过调用 error 函数来自定义错误提示信息,并通过 code 属性来判断校验错误的类型。其它更详细的用法可以查看 joi 的文档。

在实例化一个 Validator 时,我们可以传递一个 errorMessages 对象来替换默认的错误提示信息。当校验失败时,Validator 会替换掉默认的错误提示信息。

总结

vz-rn-joi 是一个较为实用的 React Native 数据校验库,使用起来方便快捷,也可以通过自定义错误提示信息来满足更加复杂的业务需求。希望本文能够帮助读者更好地使用 vz-rn-joi 进行数据校验。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005596081e8991b448d6cde


猜你喜欢

  • npm 包 hyper-macos 使用教程

    在前端开发过程中,我们常常需要使用命令行工具来完成一些操作。而 Hyper 是一个基于 Electron 的终端,它支持插件扩展,可以让我们的终端变得更加好看、高效和易用。

    2 年前
  • npm 包 qijian 使用教程

    在前端开发中,我们经常需要对日期进行格式化、计算和操作。然而,这通常需要大量的代码和时间,而且容易出错。为了方便处理日期,有一个非常流行的 npm 包叫做 qijian。

    2 年前
  • npm 包 vuc 使用教程

    前言 随着前端技术的不断发展,越来越多的开源项目涌现出来。npm 是目前最流行的 JavaScript 包管理工具,它能让你快速地下载安装各种模块和库,为开发者带来了极大的便利。

    2 年前
  • npm 包 objectarrayindexof 使用教程

    在前端开发中,我们经常需要对数组或者对象进行操作,包括查找、修改、删除等。其中,查找某个对象或者数组在另一个数组或者对象中的索引值是一项常见操作。npm 包 objectarrayindexof 就是...

    2 年前
  • npm包Windows使用教程

    什么是npm包 npm包(Node.js包管理器)是Node.js的包管理工具,用于安装和管理Node.js模块。npm包是一个庞大的开源生态系统,其中包含了来自全球各地开发者的数百万个开源软件包。

    2 年前
  • npm 包 sentence-extractor 使用教程

    前言 现如今,随着互联网技术的发展,许多网站和应用程序的前端设计变得越来越复杂,其中涉及到的内容也越来越多。因此,在前端开发过程中,处理文本数据成为一件非常重要的事情。

    2 年前
  • npm 包 @moonandyou/chrome-path-cli 使用教程

    1. 前言 在前端开发中,我们经常需要使用 Chrome 浏览器进行调试和测试。而在一些场景下,我们需要获取 Chrome 浏览器的路径,例如运行 End-to-End 测试时需要传入 Chrome ...

    2 年前
  • npm 包 backender-slim 使用教程

    在前端开发中,我们经常需要与后端进行数据交互。而在处理数据时,我们需要进行一些格式化、处理或验证操作,这时候就可以使用 backender-slim 这个 npm 包。

    2 年前
  • npm包pdfmake-to-html使用教程

    前言 pdfmake-to-html是一款便于将pdf格式文件转化为html格式文件的npm包,它的主要作用是提供前端开发人员一个方便快捷的工具来将pdf文件转化为html文件,并且该npm包还提供了...

    2 年前
  • 使用 postcss-plugin-bem-escape-block-name-less-modifier 解决 BEM 命名法中的坑

    BEM 是一种前端规范,它的核心是将 HTML 类名划分为三部分:Block、Element、Modifier,常常简称为 BEM。使用 BEM 能够让代码具有高可读性和可维护性,不过 BEM 命名法...

    2 年前
  • npm 包 quorafy 使用教程

    quorafy 是一个基于 Quora API 的 npm 包,可以方便地使用 Quora 数据并集成到自己的项目中。本文将介绍 quorafy 的安装和使用方式,并提供示例代码。

    2 年前
  • npm 包 storry 使用教程

    简介 storry 是一个基于 React 实现的轻量级状态管理工具,它可以让你快速简单的管理你的应用程序状态,并且与 React Hook API 结合得非常完美。

    2 年前
  • npm 包 cordova-plugin-memory-warning 使用教程

    前言 在开发移动端应用的过程中,随着应用复杂度的提高,应用所占用的内存也会随之增加。而对于移动设备来说,内存资源是非常宝贵的。因此,我们需要在开发过程中及时地检测和处理内存泄漏和内存过高的情况,以保障...

    2 年前
  • npm 包 localtor 使用教程

    随着前端技术的不断更新,项目的复杂度也越来越高。在这个过程中,npm 包的重要性也变得越来越大。本文介绍一款常用的 npm 包 localtor,并详细介绍其使用方法及指导意义。

    2 年前
  • npm 包 pmp-palette 使用教程

    前言 在前端开发中,颜色是一个非常重要的元素。为了方便管理和使用颜色,我们一般都会使用颜色库或者调色板。pmp-palette 就是一个非常好用的 npm 包,它可以让我们更方便地管理和使用颜色。

    2 年前
  • npm 包 pmp-thumbs 使用教程

    在现代的前端开发中,为了能够更加高效地开发和维护项目,我们通常会使用一些开源的库和工具。其中,npm 现已成为了 Node.js 生态系统中最受欢迎的包管理器。 在这个教程中,我们介绍一款名为 pmp...

    2 年前
  • npm 包 postcss-plugin-bem-escape-block-name-less-modifire 使用教程

    在现代前端开发中,为了维护可读性高、易于维护的代码,我们经常使用类名命名方式——BEM(块(Block)元素(Element)修饰符(Modifier)),而在实践中,BEM 没有使用适当的逃逸字符来...

    2 年前
  • npm 包 find-db-station-by-name 使用教程

    前言 在前后端分离的大环境下,前端工程师需要用到许多工具和库,npm 是一个不可或缺的资源。其中一个常用的包是 find-db-station-by-name。随着互联网的快速发展以及用户需求的变化,...

    2 年前
  • npm 包 hyperhtml-loader 使用教程

    介绍 hyperhtml-loader 是一个基于 hyperHTML 框架的 Webpack 加载器。如果你正在使用 hyperHTML,这个加载器的作用就是将 .html 文件转化成 hyperH...

    2 年前
  • npm包meshblu-connector-ledbutton使用教程

    简介 meshblu-connector-ledbutton是一款基于Node.js开发的前端npm包,它实现了可以控制LED灯光的按键。该包实现了通过meshblu连接硬件的功能,能够通过使用mes...

    2 年前

相关推荐

    暂无文章