什么是 bran？
bran 是一个运行在 Node.js 后端和前端 JavaScript 应用程序中的简单、轻量级的表单验证器。它的设计目的是使表单验证简单易用，而不需要大量的代码开发和维护。
如何安装 bran？
在终端中使用以下命令安装 bran：
npm install bran
如果你使用 yarn，则使用以下命令安装 bran：
yarn add bran
如何使用 bran？
使用 bran 验证表单，需要三个步骤：
- 引入 bran 模块
你可以通过 require 或者 import 的方式来引入 bran 模块：
const bran = require('bran');
// 或者
import bran from 'bran';- 创建 Bran 对象
通过 Bran 对象可以设置表单验证的规则和消息。以下代码展示了一个简单的 Bran 对象：
-- -------------------- ---- -------
----- ------------- - --- ------
----- -
--------- -----
-------- --------
--
------ -
--------- -----
-------- --------
-------- ---------------------------------
--
---- -
----- ---------
---- ---
-------- -----------
--
---在 Bran 对象中，每个字段都可以对应一个规则对象。规则对象包含了对该字段的验证规则和错误信息。上述规则中，name、email、age 字段的规则分别为：
- name 字段需要是必填项，如果没有填写，则提示 “请填写姓名”。
- email 字段需要是必填项，如果没有填写，则提示 “请填写邮箱”。同时需要满足 email 地址的正则表达式规则。
- age 字段需要是数字类型，且不能小于 18，如果不满足，则提示 “您必须年满18岁”。
- 进行表单验证
通过调用 Bran 对象的 validate 方法，可以对表单进行验证。如下代码所示：
-- -------------------- ---- -------
----- ---- - -
----- -------
------ -------------------
---- ---
--
---------------------------- -------- -- -
-- -------- -
--------------------
- ---- -
----------------------
-
---上述代码定义了一个表单对象 form，并把它传递到了 formValidator.validate 方法中。如果表单验证失败，则 errors 参数返回一个错误对象，否则返回 null。
Bran 对象的构造函数
Bran 的构造函数允许传递一个选项对象。选项对象可以包含以下属性：
validator
validator 属性值是一个对象，可以包含自定义的验证方法。例如：
-- -------------------- ---- -------
----- --------------- - -
------------ -
------ ---------------------- -- -----------------
--
--
----- ------------- - --- ------
------ -
---------- --------
-------- -----------------
--
-- ----------- ------------------message
message 属性是一个对象，可以包含自定义的错误消息。例如：
-- -------------------- ---- -------
----- ------------- - -
------ -
--------- ----------
--
--
----- ------------- - --- ------
------ -
--------- -----
--
-- --------- ----------------types
types 属性是一个对象，可以包含自定义的类型定义。例如：
-- -------------------- ---- -------
----- ----------- - -
----- -
--------------- -
----- ---- - --- ------------
------ ---------------------- -- -------------
--
--
--
----- ------------- - --- ------
------ -
----- -------
-------- -------------
--
-- ------- --------------Bran 规则
Bran 规则说明了字段的验证规则和错误消息。以下是 Bran 支持的规则：
required
required 规则用于判断是否填写了必填项。
const rules = {
name: {
required: true,
message: '请填写姓名',
},
};pattern
pattern 规则用于判断输入内容是否匹配正则表达式。
const rules = {
email: {
required: true,
message: '请填写邮箱',
pattern: /^[a-z0-9]+@[a-z0-9]+\.[a-z]+$/i,
},
};min
min 规则用于判断输入内容是否大于或等于最小值。
const rules = {
age: {
type: 'number',
min: 18,
message: '您必须年满18岁',
},
};max
max 规则用于判断输入内容是否小于或等于最大值。
const rules = {
age: {
type: 'number',
max: 60,
message: '您必须年龄在60岁以下',
},
};type
type 规则用于判断输入内容的类型。
const rules = {
phone: {
type: 'string',
message: '您必须输入手机号码',
},
};enum
enum 规则用于判断输入内容是否在给定的枚举值中。
const rules = {
sex: {
enum: ['男', '女'],
message: '您必须选择性别',
},
};length
length 规则用于判断字符串长度。
-- -------------------- ---- -------
----- ----- - -
--------- -
----- ---------
------- -
---- --
---- ---
--
-------- -------- - - -- ----
--
--validate
validate 规则通过回调函数自定义验证。
const rules = {
code: {
validate(value) {
return validateCode(value) || '您必须输入有效的验证码';
},
},
};Bran 规则的继承
Bran 规则可以通过继承来避免重复定义。以下是继承规则的示例：
-- -------------------- ---- -------
----- --------- - -
----- -
--------- -----
-------- --------
--
------ -
--------- -----
-------- --------
-------- ---------------------------------
--
--
----- --------- - -
---- -
----- ---------
---- ---
-------- -----------
--
--
----- ----- - ----------------- ---------- -----------
----- ------------- - --- ------------在上述代码中，baseRules 定义了 name 和 email 字段的基本规则。而 formRules 可以扩展和覆盖 baseRules 中的规则。最后，Object.assgin 方法用于合并两个规则对象为一个规则对象，传递给 Bran 的构造函数即可。
总结
Bran 是一个方便的表单验证器，可用于简化表单验证代码。它支持自定义规则、错误消息和类型定义，通过从基本规则中继承和扩展规则来避免重复定义。Bran 可以在 Node.js 后端或前端 JavaScript 应用程序中使用。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - --- ------
----- -
--------- -----
-------- --------
--
------ -
--------- -----
-------- --------
-------- ---------------------------------
--
---- -
----- ---------
---- ---
-------- -----------
--
---
----- ---- - -
----- -------
------ -------------------
---- ---
--
---------------------------- -------- -- -
-- -------- -
--------------------
- ---- -
----------------------
-
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c84ccdc64669dde4e67