前言
在大多数前端开发过程中，数据的校验是必不可少的一部分。为了方便数据校验，让我们更专注于业务开发，npm 上有很多优秀的校验相关的库。其中，@moohng/validator 是一款优秀的校验库，具有丰富的 API 和灵活的规则配置方式。本篇文章将介绍如何使用此库，详细讲解其 API 和使用方法。
安装
@moohng/validator 是一个 npm 包，可以通过以下命令进行安装：
npm install @moohng/validator
使用方法
@moohng/validator 的使用非常简单。它提供了多种 API 和规则，我们可以根据自己的需求进行选择和配置。
使用实例
我们下面将通过一个例子来演示 @moohng/validator 的使用方法，例如在注册页面中需要验证用户输入的用户名、密码、手机号码、电子邮件等信息。
-- -------------------- ---- -------
------ - --------- - ---- --------------------
----- ---------- - -
--------- -
- --------- ----- -------- --------- --
- ---- -- ---- --- -------- ------ - - -- ------ --
- -------- ------------------ -------- --------- -- - ----- --
--
--------- -
- --------- ----- -------- -------- --
- ---- -- ---- --- -------- ----- - - -- ------ --
--
------------ -
- --------- ----- -------- ---------- --
- -------- ----------------- -------- ------------ --
--
------ -
- --------- ----- -------- -------- --
- -------- ------------------------------------------------- -------- ------------ --
--
--
----- --------- - --- ----------------------
----- ---- - -
--------- -------
--------- -----------
------------ --------------
------ -----------------
--
----- ------ - -------------------------
-- -------- -
----------------------
-API 详解
@moohng/validator 提供了一系列的 API 用来配置规则和校验数据。
Validator(ruleConfig)
Validator 类是一个构造函数，用来创建一个校验器实例。其构造函数参数 ruleConfig 表示规则配置项，它是一个对象，对象的 key 表示要校验的字段，value 是一个规则数组。
-- -------------------- ---- -------
------ - --------- - ---- --------------------
----- ---------- - -
--------- -
- --------- ----- -------- --------- --
- ---- -- ---- --- -------- ------ - - -- ------ --
- -------- ------------------ -------- --------- -- - ----- --
--
--------- -
- --------- ----- -------- -------- --
- ---- -- ---- --- -------- ----- - - -- ------ --
--
--
----- --------- - --- ----------------------validator.validate(data)
validate 方法用来校验数据，它的参数 data 是一个对象，对象的 key 是要校验的字段，value 是要校验的值。如果校验成功，返回值为 null 或 undefined；校验失败，返回一个错误信息对象。
const errors = validator.validate({
username: "john",
password: "12345678",
});
if (errors) {
console.error(errors);
}validator.addFieldRule(field, rule)
addFieldRule 方法允许我们动态的向指定的字段添加一条规则。
validator.addFieldRule("email", [
{ required: true, message: "邮箱不能为空" },
{ pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g, message: "请输入正确的邮箱地址" },
]);validator.deleteFieldRule(field, index)
deleteFieldRule 方法用来删除指定字段上的指定下标的规则。其中 field 参数为要删除规则的字段名，index 参数为规则数组中的下标。
validator.deleteFieldRule("email", 0);规则配置
@moohng/validator 的规则配置非常灵活，同时也支持多条规则组合。
required
required 规则用来校验必填字段。其值为 true 时，表示该字段必填。
{ required: true, message: "用户名不能为空" }min & max
min 和 max 规则用来校验字段的最小长度和最大长度。其值为一个数值类型，表示最小或最大长度。
{ min: 6, max: 18, message: "用户名应在 6 到 18 个字符之间" }pattern
pattern 规则用来校验指定的正则表达式。其值为一个正则表达式。
{ pattern: /^[A-Za-z0-9]+$/g, message: "用户名只允许包含 数字 和 英文字母" }validator
validator 规则用来校验指定的验证器。
{ validator: (value) => value === "123456", message: "密码错误" }message
message 规则用来指定错误信息。其值为一个字符串类型，表示错误信息。
{ required: true, message: "用户名不能为空" }结语
@moohng/validator 是一款非常优秀的校验库，它支持多种规则配置和组合，作为前端开发者，我们需要善于利用它来提高开发效率和用户体验。本篇文章对 @moohng/validator 的使用教程做了详细的讲解，相信读者已经掌握了其中的核心知识。在今后的开发工作中，读者可根据需要灵活运用该库来提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e244811