国产,日韩免费影院,97国产精品视频在线观看

首頁

web前端

js教程

VineJS 與 Zod 進(jìn)行模式驗(yàn)證

Susan Sarandon

Oct 23, 2024 am 06:25 AM

作者 Oghenetega Denedo??

架構(gòu)驗(yàn)證是任何生產(chǎn)就緒應(yīng)用程式的必備條件，因?yàn)閬碜允褂谜呋蚱渌獠縼碓吹娜魏钨Y料都需要符合預(yù)先定義的結(jié)構(gòu)或格式，以維護(hù)資料完整性並防止應(yīng)用程式中出現(xiàn)任何意外行為。

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

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

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

什麼是 VineJS？

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

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

VineJS 的一些主要功能包括：

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

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

使用 VineJS 進(jìn)行模式驗(yàn)證

讓我們來看看 VineJS 的一些模式驗(yàn)證功能。

基本資料類型

處理使用者輸入或來自外部來源的資料時，驗(yàn)證字串、數(shù)字和布林值等基本資料類型通常是第一步。 VineJS 透過其直覺的 API 簡化了這個過程。

例如，讓我們驗(yàn)證使用者的年齡：

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)建了一個簡單的模式來驗(yàn)證輸入是一個數(shù)字，並使用 min 和 max 方法來確保它在 18 到 30 之間。 VineJS 提供了這些額外的驗(yàn)證規(guī)則來使驗(yàn)證更加精確。

有時，您需要在套用驗(yàn)證規(guī)則之前格式化輸入資料。例如，如果您想確保輸入字串在驗(yàn)證之前轉(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)換為小寫。

驗(yàn)證物件和數(shù)組

除了基本模式類型之外，VineJS 還提供物件和陣列的驗(yàn)證，這使得它對於驗(yàn)證具有多個欄位的表單或 API 有效負(fù)載特別有用。

讓我們看看如何驗(yàn)證代表使用者個人資料的物件：

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 }

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

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

陣列也可以類似處理：

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

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

預(yù)編譯模式

預(yù)編譯是 VineJS 的關(guān)鍵功能，它將模式轉(zhuǎn)換為最佳化的 JavaScript 函數(shù)，可以重複用於驗(yàn)證，以幫助減少重複解析和驗(yàn)證模式的開銷。這在生產(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ù)編譯對於需要頻繁驗(yàn)證的模式特別有用，例如高流量 API 端點(diǎn)中的模式。

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

自訂錯誤訊息

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

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

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

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

對於陣列元素，您可以使用通配符 (*) 來定位所有項(xiàng)目或指定索引：

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

自訂驗(yàn)證規(guī)則

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

在 VineJS 中，自訂規(guī)則只是一個更新或驗(yàn)證欄位值的函數(shù)。通常將三個參數(shù)傳遞給函數(shù)：要驗(yàn)證的值、規(guī)則可能需要的任何選項(xià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.',
});

為了進(jìn)一步簡化其使用，您可能需要將 mongodbId 方法直接添加到 VineString 類別中，以從可連結(jié)的 API 中受益：

佐德是什麼？

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

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

Zod 的一些主要功能是：

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

使用 Zod 進(jìn)行架構(gòu)驗(yàn)證

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

基本資料類型

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

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

在此範(fàn)例中，nameSchema 驗(yàn)證「Peter Parker」是一個字串並通過，而ageResult 由於年齡低於 18 歲而失敗。

驗(yàn)證物件和數(shù)組

處理物件和陣列時，Zod 可以輕鬆定義資料的形狀。例如，驗(yàn)證使用者物件和標(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

在上面的範(fàn)例中，userSchema 驗(yàn)證使用者數(shù)據(jù)，tagSchema 檢查陣列是否僅包含字串。陣列驗(yàn)證失敗，因?yàn)?123 不是字串。

自訂錯誤訊息

為了讓驗(yàn)證回饋更有用且更簡單地識別錯誤，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 }

此處，驗(yàn)證失敗，並拋出錯誤，並顯示自訂錯誤訊息「您必須年滿 18 歲」。

自訂驗(yàn)證

Zod 提供了使用細(xì)化方法建立自訂驗(yàn)證邏輯的靈活性，這使您可以強(qiáng)制執(zhí)行基本類型檢查以外的規(guī)則。

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

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

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

VineJS 與 Zod

表現(xiàn)

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

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

TypeScript 支援

TypeScript 支援在兩者中都非常出色，但 Zod 在設(shè)計(jì)時考慮了 TypeScript，以使類型推斷更加無縫。 VineJS 也支援 TypeScript，但整合程度不高，這使得 Zod 在 TypeScript 密集型專案中略佔(zhàn)優(yōu)勢。

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

有了更多的資源、教學(xué)和插件，Zod 擁有了更大、更成熟的社群。然而，儘管 VineJS 較新、資源較少且社群較小，但由於其易於使用的 API 和注重效能的設(shè)計(jì)，預(yù)計(jì)它將進(jìn)一步發(fā)展。

限制

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

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

其他模式驗(yàn)證庫

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

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

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

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