npm 包 inc-validation 使用教程

简介

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

阅读全文

猜你喜欢

  • npm 包 react-router-scroll-internal-history 使用教程

    背景 在 React 前端开发中，我们通常会使用 React Router 来实现前端路由的功能，而 React Router 中也提供了一个内置的 history 对象来实现浏览器的前进后退操作。

    2 年前
  • npm 包 nodevms-client 使用教程

    如果你是一个前端开发者，那么你可能会经常使用一些 npm 包来简化你的工作流程。其中一个非常有用的 npm 包就是 nodevms-client，它是一个用于与 Node.js 的虚拟内存系统（VMS...

    2 年前
  • npm 包 react-native-scrollview-unieanimated 使用教程

    React Native 在移动应用开发中有着越来越广泛的应用，而在 React Native 中，ScrollView 是非常常用的组件。ScrollView 提供了一个可滚动的视图容器，用于显示内...

    2 年前
  • npm 包 string-reverse-recursive 使用教程

    有时候我们需要对一个字符串进行翻转，比如将 "hello world" 翻转成 "dlrow olleh"。npm 包 string-reverse-recursive 就是一个很好用的工具，它可以快...

    2 年前
  • npm 包 uai 使用教程

    uai 是一个在前端开发中非常有用的 npm 包，它能够帮助开发者在开发过程中提高效率和简化代码。本文将为大家介绍 uai 的使用方法，同时提供详细的代码示例，帮助大家更好地理解它的使用。

    2 年前
  • npm 包 @abc.xyz/drop-down-treeview 使用教程

    在前端开发中，下拉树视图是一种常见的交互组件，可以让用户方便地选择树形结构的数据。而 @abc.xyz/drop-down-treeview 则是一个方便快捷的 npm 包，为前端工程师提供了一个开箱...

    2 年前
  • npm 包 flameform 使用教程

    在前端开发中，我们经常需要创建表单，并针对不同需求进行样式和验证的定制，但往往重复造轮子，费时费力。此时，一个好的表单库会让我们事半功倍。今天，我要为大家介绍一个优秀的表单库——npm 包 flame...

    2 年前
  • npm 包 badwords-js-from-csv 使用教程

    在前端开发中，我们常常需要处理用户输入的信息，其中包括敏感词汇的过滤。而 npm 包 badwords-js-from-csv 是一个十分实用的敏感词汇过滤工具，其使用方法如下。

    2 年前
  • npm 包 algorithms-and-data-structures 使用教程

    在前端开发中，算法和数据结构是非常重要的一部分。npm 上有一个叫做 algorithms-and-data-structures 的包，它包含了许多常用的算法和数据结构实现。

    2 年前
  • npm 包 nextql-feathers 使用教程

    前言 在前端开发的过程中，我们经常会使用一些后台服务，例如 Node.js、Express、Feathers 等。而在实际的开发过程中，对于前端开发人员来说，我们通常会遇到一些开发瓶颈，例如繁琐的网络...

    2 年前
  • npm 包 pinnacle.js 使用教程

    什么是 pinnacle.js？ pinnacle.js 是一款基于 TypeScript 和 jQuery 的前端框架，用于构建动态且可复用的 UI 组件。它提供了一整套高效的 API 和插件，同时...

    2 年前
  • npm 包 redux-sagas-dynamic-injector 使用教程

    介绍 redux-sagas-dynamic-injector 是一个可以帮助你动态注入 sagas 的 npm 包。在大型项目中，我们经常需要使用多个 sagas 处理不同的业务逻辑，在使用时需要手...

    2 年前
  • npm 包 'ngx-select-city' 使用教程

    'ngx-select-city' 是一款可以方便地集成到前端页面中的城市选择工具。它可以帮助用户快速选择所在的城市，使得页面使用起来更加便捷。在这里，我们将提供这款 npm 包的详细使用教程，旨在为...

    2 年前
  • npm 包 parse-yarn-lock 使用教程

    在前端开发中，我们经常使用到 npm 包管理器来安装、管理项目依赖。而在使用 npm 包依赖中，yarn-lock 文件也非常重要。它记录了所有已安装依赖的精确版本号，以确保在不同的环境中项目的运行结...

    2 年前
  • npm 包 articulog 使用教程

    简介 articulog 是一个方便的 npm 包，可以为你的前端项目提供一个简单的文章或日志系统。它提供了便捷的接口，让你轻松添加、获取和更新文章。此外，articulog 还支持文章分类和标签，帮...

    2 年前
  • npm 包 gulp-nearley 使用教程

    前言： gulp-nearley 是一个将 .ne 文件编译成解析函数的库，可以轻松地在您的 gulp 构建中使用，提升前端代码的可读性和可维护性。在这篇文章中，我们将介绍如何使用 gulp-near...

    2 年前
  • npm 包 eslint-config-finger 使用教程

    ESLint 是一个静态代码分析工具，可以帮助前端开发者找出代码错误和不规范的写法。而 eslint-config-finger 是一个提供了一系列 ESLint 的配合规则的 npm 包，可以让前端...

    2 年前
  • NPM 包 generator-ink-component 使用教程

    Generator-ink-component 是一个用于生成 React 组件的 NPM 包。它可以快速生成一个空白的 React 组件，让开发者能够更加专注于组件的实现，提升开发效率和质量。

    2 年前
  • npm 包 grunt-terminus 使用教程

    在前端开发中，自动化构建是一个必不可少的过程。Grunt 是一个 JavaScript 任务运行器，可以帮助我们自动完成诸如文件合并、压缩、编译、复制等任务。与此同时，Terminus 这个 npm ...

    2 年前
  • npm 包 Mongeral 使用教程

    在前端开发中，经常需要与后端进行数据交互，而 MongoDB 是一种非常流行的 NoSQL 数据库。对于前端开发人员来说，使用 MongoDB Node.js 驱动程序能够轻松地进行数据操作。

    2 年前

相关推荐

    暂无文章