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!