作者 Oghenetega Denedo??

架構(gòu)驗證是任何生產(chǎn)就緒應(yīng)用程序的必備條件，因為來自用戶或其他外部源的任何數(shù)據(jù)都需要符合預(yù)定義的結(jié)構(gòu)或格式，以維護數(shù)據(jù)完整性并防止應(yīng)用程序中出現(xiàn)任何意外行為。

通常，當(dāng)用戶向網(wǎng)站提交表單或通過 HTTP 請求發(fā)送到 API 的有效負(fù)載時，開發(fā)人員必須對輸入數(shù)據(jù)進行驗證。然而，手動編寫此驗證邏輯可能會重復(fù)且耗時，這不利于開發(fā)人員的工作效率。

幸運的是，用于常見開發(fā)任務(wù)的庫在 JavaScript 社區(qū)中幾乎不是什么問題，模式驗證也不例外。

在本文中，我們將通過評估 VineJS 和 Zod 的驗證功能、性能、與工具的集成以及生態(tài)系統(tǒng)來比較它們。最后，您會發(fā)現(xiàn)，雖然 VineJS 具有出色的性能，但 Zod 的多功能性和強大的 TypeScript 集成使其成為大多數(shù)項目的更全面的選擇。

什么是 VineJS？

VineJS 是一個現(xiàn)代 JavaScript/TypeScript 模式驗證庫，旨在輕量級、易于使用和高性能。

該項目源自 AdonisJS 驗證器代碼庫，并已升級并作為獨立庫發(fā)布。 VineJS 專為在 Node.js 服務(wù)器端環(huán)境中使用而構(gòu)建，尤其是在驗證 API 傳入請求以確保有效負(fù)載在進一步處理之前具有預(yù)期格式的場景。

VineJS 的一些主要功能包括：

• 輕量級且快速 - 該庫被設(shè)計為輕量級，可以以最小的應(yīng)用程序開銷有效地驗證數(shù)據(jù)
• TypeScript 支持 - VineJS 為定義的模式提供類型推斷，以便正確輸入經(jīng)過驗證的數(shù)據(jù)
• 自定義錯誤消息 - 使用簡單的消息提供程序 API，可以將錯誤消息自定義為清晰且特定于上下文
• 聲明性語法 - VineJS 還提供了一種清晰簡潔的方式來定義驗證模式，以提高可讀性并易于維護
• 預(yù)編譯模式 — VineJS 的突出功能之一是它如何通過將模式預(yù)編譯為優(yōu)化的 JavaScript 函數(shù)以重用進行驗證來提高性能
• 可擴展性 - VineJS 可以非常輕松地創(chuàng)建自定義模式類型和驗??證規(guī)則，以滿足項目的特定需求

在下一節(jié)中，我們將了解其中一些功能如何發(fā)揮作用。

使用 VineJS 進行模式驗證

讓我們看看 VineJS 的一些模式驗證功能。

基本數(shù)據(jù)類型

處理用戶輸入或來自外部源的數(shù)據(jù)時，驗證字符串、數(shù)字和布爾值等基本數(shù)據(jù)類型通常是第一步。 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");
  }
}

在這個例子中，我們創(chuàng)建了一個簡單的模式來驗證輸入是一個數(shù)字，并使用 min 和 max 方法來確保它在 18 到 30 之間。VineJS 提供了這些額外的驗證規(guī)則來使驗證更加精確。

有時，您需要在應(yīng)用驗證規(guī)則之前格式化輸入數(shù)據(jù)。例如，如果您想確保輸入字符串在驗證之前轉(zhuǎn)換為小寫，您可以在架構(gòu)中執(zhí)行此操作：

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

在此架構(gòu)中，在檢查其長度和格式之前，用戶名會被轉(zhuǎn)換為小寫。

驗證對象和數(shù)組

除了基本模式類型之外，VineJS 還提供對象和數(shù)組的驗證，這使得它對于驗證具有多個字段的表單或 API 有效負(fù)載特別有用。

讓我們看看如何驗證代表用戶個人資料的對象：

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 }

在此示例中，我們?yōu)橛脩襞渲梦募O(shè)置了一個架構(gòu)，其中包含姓名、電子郵件和年齡字段。

通過使用 vine.object() 方法，我們可以根據(jù)給定的規(guī)則驗證每個字段。默認(rèn)情況下，vine.object 中的所有字段都是必需的，因此它們必須存在于正在驗證的對象中。但是，我們已使用 option() 方法將年齡字段標(biāo)記為可選，因此如果缺少該字段，驗證也不會失敗。

數(shù)組也可以類似處理：

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' ]

在此示例中，架構(gòu)確保數(shù)組中的每個項目都是長度在 2 到 20 個字符之間的字符串，并且數(shù)組本身必須包含 1 到 10 個元素。這對于驗證標(biāo)簽或類別等列表特別有用。

預(yù)編譯模式

預(yù)編譯是 VineJS 的一個關(guān)鍵功能，它將模式轉(zhuǎn)換為優(yōu)化的 JavaScript 函數(shù)，可以重復(fù)用于驗證，以幫助減少重復(fù)解析和驗證模式的開銷。這在生產(chǎn)環(huán)境中非常有用，可以提高性能。

要預(yù)編譯模式，您可以使用 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",
  })
);

預(yù)編譯對于需要頻繁驗證的模式特別有用，例如高流量 API 端點中的模式。

由于 schema 將被編譯成可重用的函數(shù)，因此解析和驗證 schema 的重復(fù)過程就不再存在，這樣 VineJS 就可以加快驗證過程，使您的應(yīng)用程序響應(yīng)更快。

自定義錯誤消息

自定義錯誤消息有助于向用戶提供更清晰的反饋，以便更輕松地識別和糾正錯誤。 VineJS 使用其內(nèi)置的 SimpleMessagesProvider API 將錯誤消息定義為鍵值對。鍵可以是規(guī)則名稱（即 required 和字符串）或特定的字段-規(guī)則組合，值是相應(yīng)的錯誤消息。

SimpleMessagesProvider API 可以在全局、每個模式級別或在調(diào)用 validate 方法時進行配置。對于接下來的代碼示例，我們將在全局范圍內(nèi)使用該 API。

例如，假設(shè)您想要自定義用戶名和電子郵件字段的錯誤消息：

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");
  }
}

您還可以自定義嵌套字段或數(shù)組元素的消息。對于嵌套字段，請使用點表示法：

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

對于數(shù)組元素，您可以使用通配符 (*) 來定位所有項目或指定索引：

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 還允許您用更用戶友好的標(biāo)簽替換字段名稱。當(dāng)代碼中的字段名稱不適合面向用戶的消息時，這非常有用：

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' ]

自定義驗證規(guī)則

除了內(nèi)置規(guī)則提供的功能之外，VineJS 還使開發(fā)人員能夠創(chuàng)建自定義驗證規(guī)則來滿足您的特定需求。您可以在項目中使用這些自定義規(guī)則，方法是將它們實現(xiàn)為獨立函數(shù)或?qū)⑺鼈兗傻筋A(yù)先存在的架構(gòu)類中。

在 VineJS 中，自定義規(guī)則只是一個更新或驗證字段值的函數(shù)。通常將三個參數(shù)傳遞給函數(shù)：要驗證的值、規(guī)則可能需要的任何選項以及字段上下文。

例如，讓我們創(chuàng)建一個名為 mongodbId 的自定義規(guī)則，用于檢查字符串是否是有效的 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",
  })
);

為了使該規(guī)則在 VineJS 模式中可用，我們必須首先使用 vine.createRule 方法將其轉(zhuǎn)換為 VineJS 兼容規(guī)則：

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 優(yōu)先的模式驗證庫，既簡單又強大。它使定義和執(zhí)行數(shù)據(jù)結(jié)構(gòu)和驗證規(guī)則變得容易，并且它適用于前端和后端應(yīng)用程序。

Zod 專為 TypeScript 設(shè)計，確保 TypeScript 項目的平滑集成和強類型推斷。

Zod 的一些主要功能是：

• TypeScript 集成 - Zod 完全兼容 TypeScript，提供出色的類型推斷，以確保您的驗證規(guī)則與 TypeScript 類型保持同步
• 自定義錯誤消息 — Zod 允許您指定自定義錯誤消息，以便為用戶提供有意義的反饋
• 實用函數(shù) - 它包括用于模式組合和驗證的有用函數(shù)，例如合并模式和細(xì)化規(guī)則
• 不變性 — Zod 模式是不可變的，這意味著您在創(chuàng)建后不會意外修改它們
• 零依賴 - Zod npm 包非常輕量級，沒有外部依賴
• 瀏覽器和 Node.js 兼容性 - Zod 可在 Node.js 和現(xiàn)代瀏覽器中工作，因為這使其成為重用驗證模式的理想選擇

使用 Zod 進行架構(gòu)驗證

Zod 使模式驗證變得簡單而靈活，讓您可以輕松處理各種數(shù)據(jù)類型和驗證需求。它的語法與 VineJS 非常相似，您將在接下來的部分中看到。

基本數(shù)據(jù)類型

Zod 可以很好地處理字符串、數(shù)字、布爾值和日期等基本數(shù)據(jù)類型。

例如，讓我們創(chuàng)建一個簡單的模式來驗證字符串和數(shù)字：

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 歲而失敗。

驗證對象和數(shù)組

處理對象和數(shù)組時，Zod 可以輕松定義數(shù)據(jù)的形狀。例如，驗證用戶對象和標(biāo)簽列表可以像這樣完成：

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 驗證用戶數(shù)據(jù)，tagSchema 檢查數(shù)組是否僅包含字符串。數(shù)組驗證失敗，因為 123 不是字符串。

自定義錯誤消息

為了使驗證反饋更有用并更簡單地識別錯誤，Zod 還支持可配置的錯誤消息。

例如，如果年齡未滿18歲，您可以設(shè)置個性化消息：

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 提供了使用細(xì)化方法創(chuàng)建自定義驗證邏輯的靈活性，這使您可以強制執(zhí)行基本類型檢查之外的規(guī)則。

例如要驗證十六進制顏色代碼，僅僅判斷它是否是字符串是不夠的；它還需要遵循一定的模式。以下是具體操作方法：

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' ]

在此示例中，使用細(xì)化方法添加自定義驗證邏輯，以確定字符串是否是由三個或六個字符（#RGB 或 #RRGGBB）組成的有效十六進制顏色代碼。

VineJS 與 Zod

表現(xiàn)

VineJS 文檔的基準(zhǔn)測試表明，VineJS 是 Node.js 生態(tài)系統(tǒng)中最快的驗證庫之一，在簡單對象驗證和其他驗證方面超越了 Yup 和 Zod。
如 VineJS 文檔所示。

圖表顯示，VineJS 提供了卓越的性能，使其成為需要高性能的后端應(yīng)用程序的良好解決方案。 Zod 運行良好，速度足以滿足大多數(shù)用例。

TypeScript 支持

TypeScript 支持在兩者中都非常出色，但 Zod 在設(shè)計時考慮了 TypeScript，以使類型推斷更加無縫。 VineJS 也支持 TypeScript，但集成程度不高，這使得 Zod 在 TypeScript 密集型項目中略占優(yōu)勢。

生態(tài)系統(tǒng)

有了更多的資源、教程和插件，Zod 擁有了更大、更成熟的社區(qū)。然而，盡管 VineJS 較新、資源較少且社區(qū)較小，但由于其易于使用的 API 和注重性能的設(shè)計，預(yù)計它會進一步發(fā)展。

局限性

使用 VineJS 的主要缺點是它不適用于前端運行時。由于此限制，它不太適合需要客戶端驗證的應(yīng)用程序。此外，它不支持 CommonJS，這對于使用它的項目來說可能是一個問題。它僅適用于 ECMAScript 模塊 (ESM)。

但是，Zod 更加通用，支持兩種主要的 JavaScript 模塊系統(tǒng)，同時無論您運行代碼的環(huán)境如何，它都能正常工作，這使得它更適合全棧項目。

其他模式驗證庫

除了 VineJS 和 Zod 之外，對于各種用例，還有一些其他用于模式驗證的庫也值得一提。

由于其易于使用，Yup 很受歡迎并經(jīng)常用于前端驗證，特別是與 React 和 Formik 等工具結(jié)合使用時。與 VineJS 或 Zod 相比，它可能無法在復(fù)雜的結(jié)構(gòu)中發(fā)揮作用，但其可鏈接的 API 使開發(fā)模式變得簡單。

Node.js 后端中經(jīng)常使用的強大庫稱為 joi。盡管它的 API 感覺比 VineJS 和 Zod 的輕量級方法更重，但它提供了更大的靈活性并管理深度嵌套對象的復(fù)雜驗證。對于需要復(fù)雜驗證的服務(wù)器端應(yīng)用程序來說，它是完美的。

速度和完整的 JSON 模式合規(guī)性是 AJV 的主要優(yōu)先事項。盡管它缺乏 Zod 或 VineJS 所具有的用戶友好的 API，但它對于驗證 JSON 數(shù)據(jù)非常有用，尤其是在 API 中。但對于需要高效率的任務(wù)，比如驗證龐大的 JSON 數(shù)據(jù)集，它是理想的選擇。

結(jié)論

VineJS 和 Zod 是兩個優(yōu)秀的模式驗證工具，使用它們都不會出錯，但它們在不同的領(lǐng)域表現(xiàn)出色。如果您仍然不確定使用哪一個，請在一個小項目中嘗試它們，看看哪一個適合您。快樂編碼！

---

LogRocket：通過了解上下文更輕松地調(diào)試 JavaScript 錯誤

調(diào)試代碼始終是一項乏味的任務(wù)。但你越了解自己的錯誤，就越容易糾正它們。

LogRocket 允許您以新的、獨特的方式理解這些錯誤。我們的前端監(jiān)控解決方案跟蹤用戶與 JavaScript 前端的互動，使您能夠準(zhǔn)確查看用戶的操作導(dǎo)致了錯誤。

LogRocket 記錄控制臺日志、頁面加載時間、堆棧跟蹤、帶有標(biāo)頭正文的慢速網(wǎng)絡(luò)請求/響應(yīng)、瀏覽器元數(shù)據(jù)和自定義日志。了解 JavaScript 代碼的影響從未如此簡單！

免費試用。

以上是VineJS 與 Zod 進行模式驗證的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！