npm 包 validator-models 使用教程

介绍

在前端开发中,我们经常需要对用户输入的数据进行验证。但是,手动编写验证函数比较繁琐,而且容易出错。为此,有很多开发者针对不同的验证场景,开发了各种验证工具库。其中,npm 上就有很多优秀的验证库,比如 validator.js、joi 等等。

而在众多验证库中,我比较喜欢 validator-models 这个库。因为它采用了模型的概念,使得验证规则更加灵活,易于维护和扩展。本文就对 validator-models 进行详细介绍,并提供使用案例以供参考。

安装

可以使用 npm 包管理器进行安装:

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

使用

使用 validator-models,我们需要先定义一个模型对象,然后添加一系列验证规则,最后调用验证方法进行验证。下面,我们来看一个简单的示例。

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

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

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

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

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

以上代码中,我们定义了一个 user 模型,包含 name 和 age 两个属性。然后,我们定义了一个验证规则 rule,规定了 name 必须是字符串类型,长度在 1 到 10 之间,age 必须是数字类型,数值在 0 到 120 之间。

最后,我们调用 validation 方法进行验证。如果验证不通过,validation.errors 属性会包含错误信息。如果验证通过,validation.errors 属性为空数组。

验证规则

在定义验证规则时,我们可以使用以下属性:

  1. type:属性的数据类型。目前支持 string、number、boolean、array 和 object 五种类型。
  2. required:属性是否必填。如果设置为 true,那么属性值不能为空。
  3. minLength:字符串或数组的最小长度。
  4. maxLength:字符串或数组的最大长度。
  5. min:数字或日期的最小值。
  6. max:数字或日期的最大值。
  7. pattern:正则表达式模式。仅适用于字符串类型。
  8. enum:枚举值。属性值必须是枚举列表中的一个。

除了以上属性,我们还可以自定义验证规则。只需要在 rule 中添加一个自定义函数即可。例如:

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

以上代码中,我们定义了一个自定义规则,用于验证 name 属性是否为大写字母。在自定义函数中,返回值为 true 表示验证通过,返回值为 false 表示验证不通过。

数据来源

在实际应用中,我们往往需要从不同的数据来源中获取数据进行验证。例如,有时候我们的数据来自于表单提交,有时候是从数据库中查询到的数据,还有可能是外部接口传来的数据。

对于这种情况,validator-models 提供了两种解决方案:getter 和 adapter。

getter

getter 用于定义数据获取的方式。例如,在我们的示例中,数据来源是一个普通的 JavaScript 对象。那么,getter 就可以定义为一个函数,用于从对象中获取属性值。

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

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

以上代码中,我们定义了一个 getter 函数,用于从 user 对象中获取属性值。在调用 validation 方法时,将 getter 函数传入 options 参数中即可。

adapter

adapter 用于将数据转换为合适的格式。例如,在我们的示例中,需要将 age 属性从字符串类型转换为数字类型进行验证。那么,adapter 就可以定义为一个函数,用于将字符串转换为数字。

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

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

以上代码中,我们定义了一个 adapter 函数,用于将字符串类型的 age 属性值转换为数字类型。在调用 validation 方法时,将 adapter 函数传入 options 参数中即可。

扩展

虽然 validator-models 自带了很多验证规则,但有时候我们需要更丰富的验证规则。在这种情况下,我们可以通过扩展来实现。

validator-models 预留了一个 extend 方法,可以用于扩展规则。例如,我们想要增加一个验证规则,用于验证用户输入的手机号码格式是否合法。

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

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

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

以上代码中,我们创建了一个名为 extend 的对象,用于扩展验证规则。在 extend 对象中,我们为 phone 属性增加了一个自定义规则,用于验证手机号码格式。

消息国际化

validator-models 还提供了国际化支持,可以根据不同的语言环境输出不同的错误消息。要使用国际化功能,需要先定义一个 messages 对象,然后将其传入 validation 方法中。

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

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

以上代码中,我们创建了一个名为 messages 的对象,用于存储不同语言环境下的错误消息。在调用 validation 方法时,将 messages["zh-cn"] 对象传入 options 参数中即可。

总结

以上就是 validator-models 的详细使用介绍。通过本文的学习,我们了解了 validator-models 的基本用法,以及如何扩展验证规则、使用消息国际化等高级功能。validator-models 是一个简单易用的 npm 包,可以帮助开发者快速编写高质量的前端验证代码,建议大家也可以尝试使用。

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


猜你喜欢

  • npm 包 stylelint-config-cw 使用教程

    前言 在前端开发的过程中,我们经常需要遵循一些规范来约束代码风格,从而提高代码的可维护性和可读性。而 stylelint 是一个类似于 eslint 的工具,用于检查 CSS 代码中的语法和风格,并提...

    3 年前
  • npm 包 class-to-mongoose-schema 使用教程

    什么是 class-to-mongoose-schema npm 包? Class-to-mongoose-schema 是一个 npm 包,其作用是将 ES6 类转换为 Mongoose 模型的 s...

    3 年前
  • npm 包 metalsmith-move 使用教程

    在前端开发中,自动化工具的使用越来越普遍。而其中一款流行的自动化工具就是 Metalsmith。Metalsmith 是一个简单、灵活、模块化的静态站点生成器,它可以通过各种 Metalsmith 插...

    3 年前
  • npm 包 errand-rest-client 使用教程

    在前端开发中,我们经常需要与后端进行交互,而这些交互通常需要使用 HTTP 请求。在 Node.js 中,我们可以使用内置的 http 模块来发送 HTTP 请求,但是这可能会是一件繁琐的事情。

    3 年前
  • npm 包 end-lang-helper 使用教程

    在前端开发中,处理字符串是一个很常见的任务,其中很多场景需要处理字符串的结尾,如判断一段文字是否以某个符号结尾等。end-lang-helper 就是一个解决这个问题的 npm 包。

    3 年前
  • npm 包 gap-zjs-zmask 使用教程

    简介 Gap-zjs-zmask 是一个用于前端网页优化的 npm 包,用于实现图片的懒加载、虚化效果等能力,可以有效提高网页的加载速度,加快用户的访问体验。 安装 使用 npm 进行安装: --- ...

    3 年前
  • npm 包 gap-zjs-zselect 使用教程

    1. 简介 在前端开发过程中,我们常常需要使用下拉选择框来提供用户交互。gap-zjs-zselect 是一个基于 React 的 npm 包,它提供了一个易于使用且高度可定制的选择框。

    3 年前
  • npm 包 gap-zjs-zmde 使用教程

    介绍 gap-zjs-zmde 是一款用于在前端 web 应用中渲染 Markdown 文本的 npm 包。它提供了丰富的特性,如代码高亮、可嵌入图像、链接、表格等等。

    3 年前
  • npm 包 now-domains-status 使用教程

    前言 前端开发者经常需要关注域名的状态变化,比如域名是否可以访问、解析是否完成等等。虽然可以手动打开浏览器访问,但是这个过程比较繁琐且需要不断的更改域名来查看,十分耗时耗力。

    3 年前
  • npm 包 now-domains-price 使用教程

    前言 在前端开发中,我们经常需要查询域名的价格信息。如今,有很多提供 API 接口查询域名价格信息的服务,例如 name.com,GoDaddy 等,但是每一次查询都需要向外部服务请求数据,这不仅浪费...

    3 年前
  • 前端开发必备之 npm 包 generator-robin-ng-gen

    在现代化的 Web 开发中,npm 包已经成为前端开发者必备工具之一。其中一个非常优秀的 npm 包就是 generator-robin-ng-gen 。generator-robin-ng-gen ...

    3 年前
  • npm 包 angular-table-sticky-header 使用教程

    介绍 angular-table-sticky-header 是一个 AngularJS 的可重用指令,它能够将表格头部和左侧垂直固定在表格容器的顶部和左侧,让用户滚动表格内容时表格头部和左侧保持可见...

    3 年前
  • npm 包 react-intl-format 使用教程

    如果你正在开发 React 应用程序,并希望以用户友好的方式显示日期、货币和数字,则 react-intl-format 包是一个非常有用的工具。在本教程中,我们将学习如何使用 react-intl-...

    3 年前
  • npm 包 tti-measure 使用教程

    在前端性能优化中,衡量网页“开始拥有用户可用性所需时间”是非常重要的一个指标,简称 TTI 。而 tti-measure 就是 npm 上的一个用于测量 TTI 的工具包。

    3 年前
  • npm 包 bl-pubsub 使用教程

    概述 在前端开发中,经常需要进行消息的传递和订阅。而 bl-pubsub 是一款基于发布/订阅模式的 npm 包,可以简化消息传递和订阅的操作。本文将介绍如何使用 bl-pubsub 进行消息传递和订...

    3 年前
  • npm 包 lee-chart-utils 使用教程

    简介 lee-chart-utils 是一个基于 D3.js 和 SVG 技术的前端图表工具库。它提供了各种图表类型和样式的配置,可以使得前端开发者更加方便地绘制交互式的图表。

    3 年前
  • npm 包 github-webhook-payloads 使用教程

    在前端开发过程中,我们经常需要集成 Github Webhooks,以自动触发一些 CI/CD 流程或进行一些其他操作。而在 Webhooks 推送时,我们需要对接收到的 Payload 进行解析和处...

    3 年前
  • npm 包 react-native-sketch-view 使用教程

    概述 在移动应用开发中,绘图功能是一项非常基本且重要的功能。而 react-native-sketch-view 则是一款优秀的 npm 包,它为 React Native 应用提供了基于手势的绘图画...

    3 年前
  • npm 包 ts-algorithms 使用教程

    前言 ts-algorithms 是一个基于 TypeScript 的算法库,旨在提供常用的算法实现,并具有可复用性和可扩展性。它包含了各种排序算法、查找算法、图算法等。

    3 年前
  • npm 包 vue2-adminlte 使用教程

    简介 vue2-adminlte 是一个基于 Vue.js 和 AdminLTE 3 构建的后台管理系统框架,提供了一套现成的 UI 模板,可以快速搭建企业级后台管理系统。

    3 年前

相关推荐

    暂无文章