作者 Oghenetega Denedo??

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

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

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

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

什麼是 VineJS？

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

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

VineJS 的一些主要功能包括：

• 輕量級且快速 - 該庫被設(shè)計為輕量級，可以以最小的應(yīng)用程式開銷有效地驗證資料
• TypeScript 支援 - VineJS 為定義的模式提供類型推斷，以便正確輸入經(jīng)過驗證的資料
• 自訂錯誤訊息 - 使用簡單的訊息提供者 API，可以將錯誤訊息自訂為清晰且特定於上下文
• 聲明性語法 - VineJS 還提供了一種清晰簡潔的方式來定義驗證模式，以提高可讀性並易於維護
• 預編譯模式 — VineJS 的突出功能之一是它如何透過將模式預先編譯為最佳化的 JavaScript 函數(shù)以重複使用進行驗證來提高效能
• 可擴充性 - VineJS 可以非常輕鬆地建立自訂模式類型和驗證規(guī)則，以滿足專案的特定需求

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

使用 VineJS 進行模式驗證

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

基本資料類型

處理使用者輸入或來自外部來源的資料時，驗證字串、數(shù)字和布林值等基本資料類型通常是第一步。 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ī)則來使驗證更加精確。

有時，您需要在套用驗證規(guī)則之前格式化輸入資料。例如，如果您想確保輸入字串在驗證之前轉(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 還提供物件和陣列的驗證，這使得它對於驗證具有多個欄位的表單或 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 }

在此範例中，我們?yōu)槭褂谜咴O(shè)定檔設(shè)定了一個架構(gòu)，其中包含姓名、電子郵件和年齡欄位。

透過使用 vine.object() 方法，我們可以根據(jù)給定的規(guī)則驗證每個欄位。預設(shè)情況下，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' ]

在此範例中，架構(gòu)確保陣列中的每個項目都是長度在 2 到 20 個字元之間的字串，並且陣列本身必須包含 1 到 10 個元素。這對於驗證標籤或類別等清單特別有用。

預編譯模式

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

要預先編譯模式，您可以使用 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 將被編譯成可重複使用的函數(shù)，因此解析和驗證 schema 的重複過程就不再存在，這樣 VineJS 就可以加快驗證過程，使您的應(yīng)用程式響應(yīng)更快。

自訂錯誤訊息

自訂錯誤訊息有助於向使用者提供更清晰的回饋，以便更輕鬆地識別和糾正錯誤。 VineJS 使用其內(nèi)建的 SimpleMessagesProvider API 將錯誤訊息定義為鍵值對。鍵可以是規(guī)則名稱（即 required 和字串）或特定的欄位-規(guī)則組合，值是對應(yīng)的錯誤訊息。

SimpleMessagesProvider API 可以在全域、每個模式層級或在呼叫 validate 方法時進行設(shè)定。對於接下來的程式碼範例，我們將在全域範圍內(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");
  }
}

您也可以自訂巢狀欄位或陣列元素的訊息。對於嵌套字段，請使用點表示法：

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

自訂驗證規(guī)則

除了內(nèi)建規(guī)則提供的功能之外，VineJS 還使開發(fā)人員能夠建立自訂驗證規(guī)則來滿足您的特定需求。您可以在專案中使用這些自訂規(guī)則，方法是將它們實作為獨立函數(shù)或?qū)⑺鼈冋系筋A先存在的架構(gòu)類別中。

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

例如，讓我們建立一個名為 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 類別中，以從可連結(jié)的 API 中受益：

佐德是什麼？

Zod 是一個 TypeScript 優(yōu)先的模式驗證函式庫，既簡單又強大。它使定義和執(zhí)行資料結(jié)構(gòu)和驗證規(guī)則變得容易，並且它適用於前端和後端應(yīng)用程式。

Zod 專為 TypeScript 設(shè)計，確保 TypeScript 專案的平滑整合和強型別推斷。

Zod 的一些主要功能是：

• TypeScript 整合 - Zod 完全相容 TypeScript，提供出色的類型推斷，以確保您的驗證規(guī)則與 TypeScript 類型保持同步
• 自訂錯誤訊息 — Zod 可讓您指定自訂錯誤訊息，以便為使用者提供有意義的回饋
• 實用函數(shù) - 它包括用於模式組合和驗證的有用函數(shù)，例如合併模式和細化規(guī)則
• 不變性 — Zod 模式是不可變的，這表示您在建立後不會意外修改它們
• 零依賴 - Zod npm 套件非常輕量級，沒有外部依賴
• 瀏覽器和 Node.js 相容性 - Zod 可在 Node.js 和現(xiàn)代瀏覽器中運作，因為這使其成為重複使用驗證模式的理想選擇

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

Zod 讓模式驗證變得簡單且靈活，讓您可以輕鬆處理各種資料類型和驗證需求。它的語法與 VineJS 非常相似，您將在接下來的部分中看到。

基本資料類型

Zod 可以很好地處理字串、數(shù)字、布林值和日期等基本資料類型。

例如，讓我們建立一個簡單的模式來驗證字串和數(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ù)組

處理物件和陣列時，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 驗證使用者數(shù)據(jù)，tagSchema 檢查陣列是否僅包含字串。陣列驗證失敗，因為 123 不是字串。

自訂錯誤訊息

為了讓驗證回饋更有用且更簡單地識別錯誤，Zod 還支援可設(shè)定的錯誤訊息。

例如，如果年齡未滿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 提供了使用細化方法建立自訂驗證邏輯的靈活性，這使您可以強制執(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' ]

在此範例中，使用細化方法新增自訂驗證邏輯，以確定字串是否是由三個或六個字元（#RGB 或 #RRGGBB）組成的有效十六進位顏色代碼。

VineJS 與 Zod

表現(xiàn)

VineJS 文件的基準測試表明，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 擁有了更大、更成熟的社群。然而，儘管 VineJS 較新、資源較少且社群較小，但由於其易於使用的 API 和注重效能的設(shè)計，預計它將進一步發(fā)展。

限制

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

但是，Zod 更通用，支援兩種主要的 JavaScript 模組系統(tǒng)，同時無論您執(zhí)行程式碼的環(huán)境如何，它都能正常運作，這使得它更適合全端專案。

其他模式驗證庫

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

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

Node.js 後端中經(jīng)常使用的強大函式庫稱為 joi。儘管它的 API 感覺比 VineJS 和 Zod 的輕量級方法更重，但它提供了更大的靈活性並管理深度嵌套物件的複雜驗證。對於需要複雜驗證的伺服器端應(yīng)用程式來說，它是完美的。

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

結(jié)論

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

---

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

偵錯程式碼總是一項乏味的任務(wù)。但你越了解自己的錯誤，就越容易糾正它們。

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

LogRocket 記錄控制臺日誌、頁面載入時間、堆疊追蹤、帶有標頭正文的慢速網(wǎng)路請求/回應(yīng)、瀏覽器元資料和自訂日誌。了解 JavaScript 程式碼的影響從未如此簡單！

免費試用。

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