npm 包 bran 使用教程

什么是 bran?

bran 是一个运行在 Node.js 后端和前端 JavaScript 应用程序中的简单、轻量级的表单验证器。它的设计目的是使表单验证简单易用,而不需要大量的代码开发和维护。

如何安装 bran?

在终端中使用以下命令安装 bran:

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

如果你使用 yarn,则使用以下命令安装 bran:

---- --- ----

如何使用 bran?

使用 bran 验证表单,需要三个步骤:

  1. 引入 bran 模块

你可以通过 require 或者 import 的方式来引入 bran 模块:

----- ---- - ----------------
-- --
------ ---- ---- -------
  1. 创建 Bran 对象

通过 Bran 对象可以设置表单验证的规则和消息。以下代码展示了一个简单的 Bran 对象:

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

在 Bran 对象中,每个字段都可以对应一个规则对象。规则对象包含了对该字段的验证规则和错误信息。上述规则中,name、email、age 字段的规则分别为:

  • name 字段需要是必填项,如果没有填写,则提示 “请填写姓名”。
  • email 字段需要是必填项,如果没有填写,则提示 “请填写邮箱”。同时需要满足 email 地址的正则表达式规则。
  • age 字段需要是数字类型,且不能小于 18,如果不满足,则提示 “您必须年满18岁”。
  1. 进行表单验证

通过调用 Bran 对象的 validate 方法,可以对表单进行验证。如下代码所示:

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

上述代码定义了一个表单对象 form,并把它传递到了 formValidator.validate 方法中。如果表单验证失败,则 errors 参数返回一个错误对象,否则返回 null。

Bran 对象的构造函数

Bran 的构造函数允许传递一个选项对象。选项对象可以包含以下属性:

validator

validator 属性值是一个对象,可以包含自定义的验证方法。例如:

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

message

message 属性是一个对象,可以包含自定义的错误消息。例如:

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

types

types 属性是一个对象,可以包含自定义的类型定义。例如:

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

Bran 规则

Bran 规则说明了字段的验证规则和错误消息。以下是 Bran 支持的规则:

required

required 规则用于判断是否填写了必填项。

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

pattern

pattern 规则用于判断输入内容是否匹配正则表达式。

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

min

min 规则用于判断输入内容是否大于或等于最小值。

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

max

max 规则用于判断输入内容是否小于或等于最大值。

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

type

type 规则用于判断输入内容的类型。

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

enum

enum 规则用于判断输入内容是否在给定的枚举值中。

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

length

length 规则用于判断字符串长度。

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

validate

validate 规则通过回调函数自定义验证。

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

Bran 规则的继承

Bran 规则可以通过继承来避免重复定义。以下是继承规则的示例:

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

在上述代码中,baseRules 定义了 name 和 email 字段的基本规则。而 formRules 可以扩展和覆盖 baseRules 中的规则。最后,Object.assgin 方法用于合并两个规则对象为一个规则对象,传递给 Bran 的构造函数即可。

总结

Bran 是一个方便的表单验证器,可用于简化表单验证代码。它支持自定义规则、错误消息和类型定义,通过从基本规则中继承和扩展规则来避免重复定义。Bran 可以在 Node.js 后端或前端 JavaScript 应用程序中使用。

示例代码

完整的示例代码如下:

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

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

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

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


猜你喜欢

  • npm 包 bourbon-libsass 使用教程

    介绍 对于前端开发者来说,CSS 是一个必不可少的技能。然而,纯 CSS 的开发也会涉及到非常复杂的样式,如响应式布局、CSS 动画等等。好在有越来越多的便捷工具可以协助我们的样式开发,而其中一个非常...

    4 年前
  • npm 包 boreal 使用教程

    简介 Boreal 是一个基于 Vue.js 和 Bulma 的 UI 库,它为前端开发者提供了丰富的组件和布局,能够快速为网站构建美观的界面。本篇文章将向读者介绍 boreal 的使用方法和注意事项...

    4 年前
  • npm 包 borescope 使用教程

    前言 在前端开发中,我们往往会遇到需要调试 JavaScript 代码的情况。常见的调试方法有使用浏览器自带的开发者工具,或者使用第三方的调试工具。本文将介绍一个非常实用的 npm 包 boresco...

    4 年前
  • npm 包 boxsdk 使用教程

    介绍 npm 是 Node.js 的包管理器,在前端开发中变得越来越重要,同时也有越来越多的包被上传到 npm 上供开发者使用。在这篇文章中,我们将会介绍一个非常重要的 npm 包,boxsdk,它是...

    4 年前
  • npm 包 boxspring-build 使用教程

    在前端开发过程中,我们经常需要使用一些 npm 包来提升我们的开发效率。其中,boxspring-build 是一个非常实用的 npm 包,它可以帮助我们快速地搭建一个现代化的前端开发环境。

    4 年前
  • npm 包 boxspring-module 使用教程

    简介 Boxspring 是一个基于 Node.js 和 AngularJS 的 web 应用框架。Boxspring-Module 则是此框架的一个模块化插件,用于协助开发者进行模块化开发。

    4 年前
  • npm 包 boxtree 使用教程

    在前端开发中,我们经常会遇到需要对 DOM 元素进行树形结构展示的需求,比如网站的导航菜单、文件目录、问题列表等等。针对这个需求,我们可以使用 boxtree 这个 npm 包来构建出树形结构展示的组...

    4 年前
  • npm 包 boxup 使用教程

    最近,我在开发一个前端项目时,遇到了一个让我头疼的问题——如何更好地管理组件库的版本和依赖关系呢?在寻找解决方案时,我发现了一个非常好用的 npm 包——boxup。

    4 年前
  • npm 包 boxup-preset 使用教程

    在前端开发中,我们经常需要快速构建和打包静态资源文件,如 HTML、CSS、JavaScript 等。一个好的工具能够大大提高我们的开发效率和开发体验。而 boxup-preset 就是一个值得推荐的...

    4 年前
  • npm 包 boxup-cli 使用教程

    介绍 boxup-cli 是一款 npm 包,其功能是基于模板生成项目目录结构,可用于前端项目、后端项目等。使用 BoxUp,你可以快速创建一些基础结构代码,并大大缩短了项目起步时间。

    4 年前
  • npm 包 bourbon-bitters 使用教程

    npm 包 bourbon-bitters 是 Sass 的 mixin 库,它提供了一系列的 CSS 样式和工具类,可以帮助开发者更加高效地编写 CSS 样式。 本文将详细介绍 bourbon-bi...

    4 年前
  • npm 包 bouygues-sms 使用教程

    在前端开发中,发送短信验证是必不可少的功能,然而如何方便快捷地完成短信发送呢?bouygues-sms 就是一个非常不错的 npm 包,本文将为您详细介绍如何使用 bouygues-sms ,帮助您方...

    4 年前
  • npm 包 bouyomi 使用教程

    前言 在前端开发中,我们经常需要进行音频合成或语音播报的功能。在多语言或多语音环境下,我们需要将这一过程自动化,提高效率。npm 包 bouyomi 提供了一个简单易用的解决方案,能够快速生成多种语言...

    4 年前
  • npm 包 bouzuya-ts-bundled-package 使用教程

    前言 在前端开发中,我们通常需要引用第三方库,而 npm 是前端项目中最常用的包管理器之一。为了方便使用这些第三方库,通常需要将它们打包成一个文件来减少加载次数,提高页面加载速度。

    4 年前
  • npm 包 borex-action-enhancer-helpers 使用教程

    前言 在前端开发中,我们经常需要对 Redux 中的 action 进行增强操作,而 borex-action-enhancer-helpers 是一个方便实用的工具,可以帮助我们实现对 action...

    4 年前
  • npm 包 bourbon-sass-loader 使用教程

    如果你是一名前端开发者,可能对 Sass 肯定不陌生。Sass 是一种 CSS 预处理器,它可以让你写出更易管理、更优雅的 CSS 代码。而 bourbon-sass-loader 则是一个使用了 B...

    4 年前
  • npm 包 bourn 使用教程

    bourn 是一个可以帮助前端工程师自动化构建任务的 npm 包。它可以在打包、压缩、编译等方面帮助开发者减轻负担,同时提高开发效率。 bourn 的安装 我们可以通过以下步骤进行 bourn 的安装...

    4 年前
  • npm 包 Bouton 使用教程

    简介 Bouton 是一个基于 React 的 UI 组件库,提供了一系列常用的 UI 组件,如按钮、表格、对话框等。这些组件都经过严格的测试和优化,确保在各种场景下都能有良好的表现。

    4 年前
  • npm 包 bourse-cli 使用教程

    什么是 bourse-cli? bourse-cli 是一款开源、简单易用的 npm 包,用于获取股票行情数据。它可以帮助前端开发者更快、更方便地获取实时股票价格数据并进行相应操作。

    4 年前
  • npm 包 bouwen 使用教程

    前言 bouwen 是一个基于 webpack 的前端构建工具,提供了一系列的开箱即用的配置项,帮助开发人员轻松实现构建、打包和热更新等功能,可以极大地提高项目开发效率和代码质量。

    4 年前

相关推荐

    暂无文章