VineJS 与 Zod 进行模式验证-js教程-PHP中文网

首页

web前端

js教程

VineJS 与 Zod 进行模式验证

Susan Sarandon

Oct 23, 2024 am 06:25 AM

作者 Oghenetega Denedo✏️

架构验证是任何生产就绪应用程序的必备条件，因为来自用户或其他外部源的任何数据都需要符合预定义的结构或格式，以维护数据完整性并防止应用程序中出现任何意外行为。

通常，当用户向网站提交表单或通过 HTTP 请求发送到 API 的有效负载时，开发人员必须对输入数据进行验证。然而，手动编写此验证逻辑可能会重复且耗时，这不利于开发人员的工作效率。

幸运的是，用于常见开发任务的库在 JavaScript 社区中几乎不是什么问题，模式验证也不例外。

在本文中，我们将通过评估 VineJS 和 Zod 的验证功能、性能、与工具的集成以及生态系统来比较它们。最后，您会发现，虽然 VineJS 具有出色的性能，但 Zod 的多功能性和强大的 TypeScript 集成使其成为大多数项目的更全面的选择。

什么是 VineJS？

VineJS 是一个现代 JavaScript/TypeScript 模式验证库，旨在轻量级、易于使用和高性能。

该项目源自 AdonisJS 验证器代码库，并已升级并作为独立库发布。 VineJS 专为在 Node.js 服务器端环境中使用而构建，尤其是在验证 API 传入请求以确保有效负载在进一步处理之前具有预期格式的场景。

VineJS 的一些主要功能包括：

轻量级且快速 - 该库被设计为轻量级，可以以最小的应用程序开销有效地验证数据
TypeScript 支持 - VineJS 为定义的模式提供类型推断，以便正确输入经过验证的数据
自定义错误消息 - 使用简单的消息提供程序 API，可以将错误消息自定义为清晰且特定于上下文
声明性语法 - VineJS 还提供了一种清晰简洁的方式来定义验证模式，以提高可读性并易于维护
预编译模式 — VineJS 的突出功能之一是它如何通过将模式预编译为优化的 JavaScript 函数以重用进行验证来提高性能
可扩展性 - VineJS 可以非常轻松地创建自定义模式类型和验证规则，以满足项目的特定需求

在下一节中，我们将了解其中一些功能如何发挥作用。

使用 VineJS 进行模式验证

让我们看看 VineJS 的一些模式验证功能。

基本数据类型

处理用户输入或来自外部源的数据时，验证字符串、数字和布尔值等基本数据类型通常是第一步。 VineJS 通过其直观的 API 简化了这个过程。

例如，让我们验证用户的年龄：

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

登录后复制

在这个例子中，我们创建了一个简单的模式来验证输入是一个数字，并使用 min 和 max 方法来确保它在 18 到 30 之间。VineJS 提供了这些额外的验证规则来使验证更加精确。

有时，您需要在应用验证规则之前格式化输入数据。例如，如果您想确保输入字符串在验证之前转换为小写，您可以在架构中执行此操作：

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

登录后复制

在此架构中，在检查其长度和格式之前，用户名会被转换为小写。

验证对象和数组

除了基本模式类型之外，VineJS 还提供对象和数组的验证，这使得它对于验证具有多个字段的表单或 API 有效负载特别有用。

让我们看看如何验证代表用户个人资料的对象：

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

登录后复制

在此示例中，我们为用户配置文件设置了一个架构，其中包含姓名、电子邮件和年龄字段。

通过使用 vine.object() 方法，我们可以根据给定的规则验证每个字段。默认情况下，vine.object 中的所有字段都是必需的，因此它们必须存在于正在验证的对象中。但是，我们已使用 option() 方法将年龄字段标记为可选，因此如果缺少该字段，验证也不会失败。

数组也可以类似处理：

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

登录后复制

在此示例中，架构确保数组中的每个项目都是长度在 2 到 20 个字符之间的字符串，并且数组本身必须包含 1 到 10 个元素。这对于验证标签或类别等列表特别有用。

预编译模式

预编译是 VineJS 的一个关键功能，它将模式转换为优化的 JavaScript 函数，可以重复用于验证，以帮助减少重复解析和验证模式的开销。这在生产环境中非常有用，可以提高性能。

要预编译模式，您可以使用 vine.compile() 方法：

const compiledSchema = vine.compile(
  vine.object({
    username: vine.string().minLength(3).maxLength(30),
    password: vine.string().minLength(8),
  })
);

// Use the compiled schema to validate data
console.log(
  await compiledSchema.validate({
    username: "janedoe",
    password: "password123",
  })
);

登录后复制

预编译对于需要频繁验证的模式特别有用，例如高流量 API 端点中的模式。

由于 schema 将被编译成可重用的函数，因此解析和验证 schema 的重复过程就不再存在，这样 VineJS 就可以加快验证过程，使您的应用程序响应更快。

自定义错误消息

自定义错误消息有助于向用户提供更清晰的反馈，以便更轻松地识别和纠正错误。 VineJS 使用其内置的 SimpleMessagesProvider API 将错误消息定义为键值对。键可以是规则名称（即 required 和字符串）或特定的字段-规则组合，值是相应的错误消息。

SimpleMessagesProvider API 可以在全局、每个模式级别或在调用 validate 方法时进行配置。对于接下来的代码示例，我们将在全局范围内使用该 API。

例如，假设您想要自定义用户名和电子邮件字段的错误消息：

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

登录后复制

您还可以自定义嵌套字段或数组元素的消息。对于嵌套字段，请使用点表示法：

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

登录后复制

对于数组元素，您可以使用通配符 (*) 来定位所有项目或指定索引：

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

登录后复制

VineJS 还允许您用更用户友好的标签替换字段名称。当代码中的字段名称不适合面向用户的消息时，这非常有用：

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

登录后复制

自定义验证规则

除了内置规则提供的功能之外，VineJS 还使开发人员能够创建自定义验证规则来满足您的特定需求。您可以在项目中使用这些自定义规则，方法是将它们实现为独立函数或将它们集成到预先存在的架构类中。

在 VineJS 中，自定义规则只是一个更新或验证字段值的函数。通常将三个参数传递给函数：要验证的值、规则可能需要的任何选项以及字段上下文。

例如，让我们创建一个名为 mongodbId 的自定义规则，用于检查字符串是否是有效的 MongoDB ObjectId：

const compiledSchema = vine.compile(
  vine.object({
    username: vine.string().minLength(3).maxLength(30),
    password: vine.string().minLength(8),
  })
);

// Use the compiled schema to validate data
console.log(
  await compiledSchema.validate({
    username: "janedoe",
    password: "password123",
  })
);

登录后复制

为了使该规则在 VineJS 模式中可用，我们必须首先使用 vine.createRule 方法将其转换为 VineJS 兼容规则：

import vine, { SimpleMessagesProvider } from '@vinejs/vine';

vine.messagesProvider = new SimpleMessagesProvider({
  'required': 'You must provide a value for {{ field }}.',
  'email': '{{ field }} needs to be a valid email address.',
  'username.required': 'A username is required to continue.',
});

登录后复制

为了进一步简化其使用，您可能需要将 mongodbId 方法直接添加到 VineString 类中，以从可链接的 API 中受益：

佐德是什么？

Zod 是一个 TypeScript 优先的模式验证库，既简单又强大。它使定义和执行数据结构和验证规则变得容易，并且它适用于前端和后端应用程序。

Zod 专为 TypeScript 设计，确保 TypeScript 项目的平滑集成和强类型推断。

Zod 的一些主要功能是：

TypeScript 集成 - Zod 完全兼容 TypeScript，提供出色的类型推断，以确保您的验证规则与 TypeScript 类型保持同步
自定义错误消息 — Zod 允许您指定自定义错误消息，以便为用户提供有意义的反馈
实用函数 - 它包括用于模式组合和验证的有用函数，例如合并模式和细化规则
不变性 — Zod 模式是不可变的，这意味着您在创建后不会意外修改它们
零依赖 - Zod npm 包非常轻量级，没有外部依赖
浏览器和 Node.js 兼容性 - Zod 可在 Node.js 和现代浏览器中工作，因为这使其成为重用验证模式的理想选择

使用 Zod 进行架构验证

Zod 使模式验证变得简单而灵活，让您可以轻松处理各种数据类型和验证需求。它的语法与 VineJS 非常相似，您将在接下来的部分中看到。

基本数据类型

Zod 可以很好地处理字符串、数字、布尔值和日期等基本数据类型。

例如，让我们创建一个简单的模式来验证字符串和数字：

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

登录后复制

在此示例中，nameSchema 验证“Peter Parker”是一个字符串并通过，而ageResult 由于年龄低于 18 岁而失败。

验证对象和数组

处理对象和数组时，Zod 可以轻松定义数据的形状。例如，验证用户对象和标签列表可以像这样完成：

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

登录后复制

在上面的示例中，userSchema 验证用户数据，tagSchema 检查数组是否仅包含字符串。数组验证失败，因为 123 不是字符串。

自定义错误消息

为了使验证反馈更有用并更简单地识别错误，Zod 还支持可配置的错误消息。

例如，如果年龄未满18岁，您可以设置个性化消息：

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

登录后复制

此处，验证失败，并抛出错误，并显示自定义错误消息“您必须年满 18 岁”。

自定义验证

Zod 提供了使用细化方法创建自定义验证逻辑的灵活性，这使您可以强制执行基本类型检查之外的规则。

例如要验证十六进制颜色代码，仅仅判断它是否是字符串是不够的；它还需要遵循一定的模式。以下是具体操作方法：

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

登录后复制

在此示例中，使用细化方法添加自定义验证逻辑，以确定字符串是否是由三个或六个字符（#RGB 或 #RRGGBB）组成的有效十六进制颜色代码。