VineJS vs. Zod für die Schemavalidierung

Geschrieben von Oghenetega Denedo✏️

Die Schemavalidierung ist ein Muss für jede produktionsreife App, da alle Daten von Benutzern oder anderen externen Quellen einer vordefinierten Struktur oder einem vordefinierten Format entsprechen müssen, um die Datenintegrität aufrechtzuerhalten und unerwartetes Verhalten in unseren Anwendungen zu verhindern.

Normalerweise müssen Entwickler eine Validierung für Eingabedaten erstellen, wenn ein Benutzer ein Formular an eine Website sendet, oder für Nutzdaten, die über eine HTTP-Anfrage an eine API gesendet werden. Das manuelle Schreiben dieser Validierungslogik kann sich jedoch wiederholen und zeitaufwändig sein, was sich nicht positiv auf die Entwicklerproduktivität auswirkt.

Glücklicherweise stellten Bibliotheken für allgemeine Entwicklungsaufgaben in der JavaScript-Community kaum ein Problem dar, und die Schemavalidierung bildet da keine Ausnahme.

In diesem Artikel vergleichen wir VineJS und Zod, indem wir ihre Validierungsfunktionen, Leistung, Integration mit Tools und Ökosystem bewerten. Am Ende werden Sie feststellen, dass VineJS zwar durch Leistung überzeugt, Zods Vielseitigkeit und starke TypeScript-Integration es jedoch zu einer vielseitigeren Wahl für die meisten Projekte machen.

Was ist VineJS?

VineJS ist eine moderne JavaScript/TypeScript-Schemavalidierungsbibliothek, die leichtgewichtig, benutzerfreundlich und hochleistungsfähig ist.

Das Projekt stammt aus der AdonisJS-Validator-Codebasis und wurde aktualisiert und als eigenständige Bibliothek veröffentlicht. VineJS wurde für den Einsatz in serverseitigen Node.js-Umgebungen entwickelt, insbesondere in Szenarien wie der Validierung eingehender Anfragen an eine API, um sicherzustellen, dass die Nutzlast vor der weiteren Verarbeitung das erwartete Format hat.

Zu den wichtigsten Funktionen von VineJS gehören:

• Leicht und schnell – Die Bibliothek wurde so konzipiert, dass sie leichtgewichtig ist, um Daten mit minimalem Aufwand für Anwendungen effektiv zu validieren
• TypeScript-Unterstützung – VineJS bietet Typinferenz für definierte Schemata, sodass validierte Daten korrekt typisiert werden
• Benutzerdefinierte Fehlermeldungen – Mit der einfachen Nachrichtenanbieter-API können Fehlermeldungen so angepasst werden, dass sie klar und kontextspezifisch sind
• Deklarative Syntax – VineJS bietet außerdem eine klare und prägnante Möglichkeit, Validierungsschemata für eine bessere Lesbarkeit und einfache Wartung zu definieren
• Schema vorkompilieren – Eine der herausragenden Funktionen von VineJS ist die Leistungssteigerung durch Vorkompilieren von Schemata in optimierte JavaScript-Funktionen zur Wiederverwendung zur Validierung
• Erweiterbarkeit – VineJS macht es sehr einfach, benutzerdefinierte Schematypen und Validierungsregeln zu erstellen, um die spezifischen Anforderungen Ihres Projekts zu erfüllen

Im nächsten Abschnitt werden wir sehen, wie einige dieser Funktionen zum Tragen kommen.

Schemavalidierung mit VineJS

Sehen wir uns einige der Schemavalidierungsfunktionen von VineJS an.

Grundlegende Datentypen

Bei der Arbeit mit Benutzereingaben oder Daten aus externen Quellen ist die Validierung grundlegender Datentypen wie Zeichenfolgen, Zahlen und Boolesche Werte oft der erste Schritt. VineJS vereinfacht diesen Prozess mit seiner intuitiven API.

Lassen Sie uns beispielsweise das Alter eines Benutzers validieren:

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

In diesem Beispiel haben wir ein einfaches Schema erstellt, um zu überprüfen, ob es sich bei der Eingabe um eine Zahl handelt, und Min- und Max-Methoden verwendet, um sicherzustellen, dass der Wert zwischen 18 und 30 liegt. VineJS bietet diese zusätzlichen Validierungsregeln, um die Validierung präziser zu gestalten.

Manchmal müssen Sie Eingabedaten formatieren, bevor Sie Validierungsregeln anwenden. Wenn Sie beispielsweise sicherstellen möchten, dass eine Eingabezeichenfolge vor der Validierung in Kleinbuchstaben umgewandelt wird, können Sie dies im Schema tun:

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

In diesem Schema wird der Benutzername in Kleinbuchstaben umgewandelt, bevor seine Länge und sein Format überprüft werden.

Validieren von Objekten und Arrays

VineJS bietet über die grundlegenden Schematypen hinaus eine Validierung für Objekte und Arrays an, was es besonders nützlich für die Validierung von Formularen oder API-Nutzlasten mit mehreren Feldern macht.

Sehen wir uns an, wie Sie ein Objekt validieren können, das das Profil eines Benutzers darstellt:

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 }

In diesem Beispiel haben wir ein Schema für ein Benutzerprofil mit Feldern für Name, E-Mail und Alter eingerichtet.

Durch die Verwendung der Methode vine.object() können wir jedes Feld gemäß den angegebenen Regeln validieren. Alle Felder in vine.object sind standardmäßig erforderlich, daher müssen sie im zu validierenden Objekt vorhanden sein. Allerdings haben wir das Altersfeld mit der optional()-Methode als optional markiert, sodass die Validierung nicht fehlschlägt, wenn es fehlt.

Arrays können auch auf ähnliche Weise behandelt werden:

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

In diesem Beispiel stellt das Schema sicher, dass jedes Element im Array eine Zeichenfolge mit einer Länge zwischen 2 und 20 Zeichen ist und das Array selbst 1 bis 10 Elemente enthalten muss. Dies ist besonders nützlich für die Validierung von Listen wie Tags oder Kategorien.

Schemata vorkompilieren

Vorkompilierung ist eine Schlüsselfunktion von VineJS, die ein Schema in eine optimierte JavaScript-Funktion umwandelt, die zur Validierung wiederverwendet werden kann, um den Aufwand für das wiederholte Parsen und Validieren des Schemas zu reduzieren. Dies kann in Produktionsumgebungen sehr nützlich sein, um Leistungssteigerungen zu erzielen.

Um ein Schema vorab zu kompilieren, können Sie die Methode vine.compile() verwenden:

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

Die Vorkompilierung ist besonders nützlich für Schemata, die eine häufige Validierung erfordern, z. B. solche in einem API-Endpunkt mit hohem Datenverkehr.

Da das Schema in eine wiederverwendbare Funktion kompiliert wird, entfällt der sich wiederholende Prozess des Parsens und Validierens des Schemas, sodass VineJS den Validierungsprozess beschleunigen kann, um Ihre Anwendung reaktionsfähiger zu machen.

Benutzerdefinierte Fehlermeldungen

Benutzerdefinierte Fehlermeldungen tragen dazu bei, den Benutzern ein klareres Feedback zu geben, damit Fehler leichter erkannt und korrigiert werden können. VineJS verwendet seine integrierte SimpleMessagesProvider-API, um Fehlermeldungen als Schlüssel-Wert-Paare zu definieren. Der Schlüssel kann ein Regelname sein, d. h. erforderlich und eine Zeichenfolge, oder eine bestimmte Feld-Regel-Kombination, und der Wert ist die entsprechende Fehlermeldung.

Die SimpleMessagesProvider-API kann global, auf Schemaebene oder beim Aufruf der Validate-Methode konfiguriert werden. Für die folgenden Codebeispiele verwenden wir die API global.

Angenommen, Sie möchten die Fehlermeldungen für ein Benutzername- und E-Mail-Feld anpassen:

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

Sie können Nachrichten auch für verschachtelte Felder oder Array-Elemente anpassen. Verwenden Sie für verschachtelte Felder die Punktnotation:

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ür Array-Elemente können Sie einen Platzhalter (*) verwenden, um alle Elemente als Ziel festzulegen, oder einen Index angeben:

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 ermöglicht Ihnen auch, Feldnamen durch benutzerfreundlichere Beschriftungen zu ersetzen. Dies ist hilfreich, wenn die Feldnamen in Ihrem Code nicht für benutzerbezogene Nachrichten geeignet sind:

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

Benutzerdefinierte Validierungsregeln

Über die integrierten Regeln hinaus bietet VineJS Entwicklern die Möglichkeit, benutzerdefinierte Validierungsregeln zu erstellen, die Ihren spezifischen Anforderungen entsprechen. Sie können diese benutzerdefinierten Regeln in Ihrem Projekt verwenden, indem Sie sie als eigenständige Funktionen implementieren oder in bereits vorhandene Schemaklassen integrieren.

In VineJS ist eine benutzerdefinierte Regel einfach eine Funktion, die den Wert eines Feldes aktualisiert oder validiert. Normalerweise werden drei Parameter an die Funktion übergeben: der zu validierende Wert, alle Optionen, die die Regel möglicherweise benötigt, und der Feldkontext.

Lassen Sie uns beispielsweise eine benutzerdefinierte Regel namens „mongodbId“ erstellen, die prüft, ob eine Zeichenfolge eine gültige MongoDB-Objekt-ID ist:

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

Um diese Regel in VineJS-Schemas nutzbar zu machen, müssen wir sie zunächst mithilfe der vine.createRule-Methode in eine VineJS-kompatible Regel konvertieren:

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.',
});

Um die Verwendung weiter zu vereinfachen, möchten Sie möglicherweise die mongodbId-Methode direkt zur VineString-Klasse hinzufügen, um von einer verkettbaren API zu profitieren:

Was ist Zod?

Zod ist eine TypeScript-First-Schemavalidierungsbibliothek, die sowohl einfach als auch leistungsstark ist. Es erleichtert das Definieren und Durchsetzen von Datenstrukturen und Validierungsregeln und eignet sich sowohl für Frontend- als auch für Backend-Anwendungen.

Zod wurde speziell für TypeScript entwickelt und gewährleistet eine reibungslose Integration und starke Typinferenz für TypeScript-Projekte.

Einige der Hauptfunktionen von Zod sind:

• TypeScript-Integration – Zod ist vollständig TypeScript-kompatibel und bietet hervorragende Typinferenz, um sicherzustellen, dass Ihre Validierungsregeln mit Ihren TypeScript-Typen synchron bleiben
• Benutzerdefinierte Fehlermeldungen – Zod ermöglicht Ihnen die Angabe benutzerdefinierter Fehlermeldungen für aussagekräftiges Feedback an Benutzer
• Hilfsfunktionen – Es enthält nützliche Funktionen für die Schemakomposition und -validierung, wie z. B. das Zusammenführen von Schemas und das Verfeinern von Regeln
• Unveränderlichkeit – Zod-Schemata sind unveränderlich, was bedeutet, dass Sie sie nach der Erstellung nicht versehentlich ändern können
• Keine Abhängigkeiten – Das Zod npm-Paket ist sehr leichtgewichtig und weist keine externen Abhängigkeiten auf
• Browser- und Node.js-Kompatibilität – Zod funktioniert sowohl in Node.js als auch in modernen Browsern, da es sich dadurch ideal für die Wiederverwendung von Validierungsschemata eignet

Schemavalidierung mit Zod

Zod macht die Schemavalidierung unkompliziert und flexibel, sodass Sie problemlos mit verschiedenen Datentypen und Validierungsanforderungen umgehen können. Seine Syntax ist der von VineJS sehr ähnlich, wie Sie in den folgenden Abschnitten sehen werden.

Grundlegende Datentypen

Zod verarbeitet grundlegende Datentypen wie Zeichenfolgen, Zahlen, boolesche Werte und Datumsangaben gut.

Lassen Sie uns zum Beispiel ein einfaches Schema zur Validierung einer Zeichenfolge und einer Zahl erstellen:

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

In diesem Beispiel validiert nameSchema, dass „Peter Parker“ eine Zeichenfolge ist und besteht die Prüfung, während ageResult fehlschlägt, weil das Alter unter 18 liegt.

Validieren von Objekten und Arrays

Beim Umgang mit Objekten und Arrays erleichtert Zod die Definition der Form Ihrer Daten. Die Validierung eines Benutzerobjekts und einer Liste von Tags kann beispielsweise wie folgt erfolgen:

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

Im obigen Beispiel validiert userSchema die Benutzerdaten und tagsSchema prüft, ob das Array nur Zeichenfolgen enthält. Die Array-Validierung schlägt fehl, da 123 keine Zeichenfolge ist.

Benutzerdefinierte Fehlermeldungen

Um Validierungsfeedback nützlicher zu machen und Fehler einfacher zu erkennen, unterstützt Zod auch konfigurierbare Fehlermeldungen.

Wenn das Alter beispielsweise unter 18 ist, können Sie eine personalisierte Nachricht festlegen:

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 }

Hier schlägt die Validierung fehl und es wird ein Fehler mit der benutzerdefinierten Fehlermeldung „Sie müssen mindestens 18 Jahre alt sein“ ausgegeben.

Benutzerdefinierte Validierungen

Zod bietet Flexibilität für die Erstellung benutzerdefinierter Validierungslogik mithilfe der Refine-Methode, mit der Sie Regeln durchsetzen können, die über die grundlegende Typprüfung hinausgehen.

Um beispielsweise einen Hex-Farbcode zu validieren, reicht es nicht aus, einfach festzustellen, ob es sich um eine Zeichenfolge handelt; es muss auch einem bestimmten Muster folgen. So gehen Sie vor:

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

In diesem Beispiel wird eine benutzerdefinierte Validierungslogik mithilfe der Refine-Methode hinzugefügt, um zu bestimmen, ob es sich bei der Zeichenfolge um einen gültigen Hex-Farbcode handelt, der aus drei oder sechs Zeichen besteht (#RGB oder #RRGGBB).

VineJS gegen Zod

Leistung

Benchmarks aus den VineJS-Dokumenten zeigen, dass VineJS eine der schnellsten Validierungsbibliotheken im Node.js-Ökosystem ist und Yup und Zod bei der einfachen Objektvalidierung und anderen Validierungen übertrifft.
Wie in der VineJS-Dokumentation gezeigt.

Das Diagramm zeigt, dass VineJS eine überlegene Leistung bietet und es somit eine gute Lösung für Backend-Anwendungen ist, die eine hohe Leistung benötigen. Zod funktioniert gut und ist für die meisten Anwendungsfälle schnell genug.

TypeScript-Unterstützung

Die TypeScript-Unterstützung ist in beiden Fällen hervorragend, aber Zod wurde speziell für TypeScript entwickelt, um die Typinferenz reibungsloser zu gestalten. VineJS unterstützt auch TypeScript, ist aber nicht so tief integriert, was Zod bei TypeScript-lastigen Projekten einen leichten Vorsprung verschafft.

Ökosystem

Mit mehr verfügbaren Ressourcen, Tutorials und Plugins verfügt Zod über eine größere und etabliertere Community. Obwohl VineJS neuer ist, über weniger Ressourcen verfügt und eine kleinere Community hat, wird aufgrund seiner benutzerfreundlichen API und seines leistungsorientierten Designs mit einem weiteren Wachstum gerechnet.

Einschränkungen

Der Hauptnachteil der Verwendung von VineJS besteht darin, dass es nicht für die Verwendung in Frontend-Laufzeiten konzipiert ist. Aufgrund dieser Einschränkung ist es weniger für Anwendungen geeignet, die eine clientseitige Validierung erfordern. Darüber hinaus wird CommonJS nicht unterstützt, was für Projekte, die es verwenden, ein Problem darstellen könnte. Es funktioniert nur mit ECMAScript-Modulen (ESM).

Zod ist jedoch vielseitiger, unterstützt die beiden wichtigsten JavaScript-Modulsysteme und funktioniert unabhängig von der Umgebung, in der Sie Ihren Code ausführen, gut, wodurch es sich besser für Full-Stack-Projekte eignet.

Andere Schemavalidierungsbibliotheken

Neben VineJS und Zod sind noch einige andere Bibliotheken zur Schemavalidierung für verschiedene Anwendungsfälle erwähnenswert.

Aufgrund seiner Benutzerfreundlichkeit ist Yup beliebt und wird häufig in der Front-End-Validierung verwendet, insbesondere in Kombination mit React und Tools wie Formik. Im Vergleich zu VineJS oder Zod funktioniert es bei komplexen Strukturen möglicherweise nicht so gut, aber seine verkettbare API vereinfacht die Entwicklung von Schemata.

Eine leistungsstarke Bibliothek, die häufig in Node.js-Backends verwendet wird, heißt joi. Obwohl sich seine API schwerer anfühlen kann als der leichtgewichtige Ansatz von VineJS und Zod, bietet sie mehr Flexibilität und verwaltet komplizierte Validierungen für tief verschachtelte Objekte. Für serverseitige Apps, die eine anspruchsvolle Validierung erfordern, ist es perfekt.

Geschwindigkeit und vollständige JSON-Schema-Konformität sind die Hauptprioritäten von AJV. Obwohl ihm die benutzerfreundlichen APIs von Zod oder VineJS fehlen, eignet es sich hervorragend für die Validierung von JSON-Daten, insbesondere in APIs. Aber für Aufgaben, die eine hohe Effizienz erfordern, wie die Validierung großer JSON-Datensätze, ist es ideal.

Abschluss

VineJS und Zod sind zwei hervorragende Schemavalidierungstools, mit denen Sie nichts falsch machen können, aber sie zeichnen sich in verschiedenen Bereichen aus. Wenn Sie sich immer noch nicht sicher sind, welche Sie verwenden sollen, probieren Sie beide in einem kleinen Projekt aus und finden Sie heraus, welche für Sie die richtige ist. Viel Spaß beim Codieren!

---

LogRocket: JavaScript-Fehler einfacher beheben, indem Sie den Kontext verstehen

Das Debuggen von Code ist immer eine mühsame Aufgabe. Aber je besser Sie Ihre Fehler verstehen, desto einfacher ist es, sie zu beheben.

LogRocket ermöglicht es Ihnen, diese Fehler auf neue und einzigartige Weise zu verstehen. Unsere Frontend-Überwachungslösung verfolgt die Benutzerinteraktion mit Ihren JavaScript-Frontends, um Ihnen die Möglichkeit zu geben, genau zu sehen, was der Benutzer getan hat, was zu einem Fehler geführt hat.

LogRocket zeichnet Konsolenprotokolle, Seitenladezeiten, Stack-Traces, langsame Netzwerkanforderungen/-antworten mit Header-Körpern, Browser-Metadaten und benutzerdefinierten Protokollen auf. Es wird nie einfacher sein, die Auswirkungen Ihres JavaScript-Codes zu verstehen!

Probieren Sie es kostenlos aus.

Das obige ist der detaillierte Inhalt vonVineJS vs. Zod für die Schemavalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!