Hallo! In diesem Tutorial erfahren Sie, wie Sie ein Array von Zeichenfolgen mithilfe der Yup-Validierungsbibliothek validieren. Zunächst erfahren Sie, wie Sie einen String validieren und ihn dann auf ein Array anwenden. Ich hatte kürzlich dieses Problem, bei dem das Formular erfordert, dass jedes Eingabefeld nicht leer sein darf. Ich werde in diesem Tutorial erzählen, wie ich es gemacht habe.

Was ist Ja?

Yup ist eine beliebte, einfache Open-Source-Laufzeitvalidierungsbibliothek für JavaScript (und Typescript). Yup ist eine JavaScript-Schemavalidierungsbibliothek, die eine Möglichkeit bietet, Datenschemata auf deklarative und benutzerfreundliche Weise zu definieren und zu validieren. Es wird häufig in der Frontend-Entwicklung verwendet, insbesondere bei Formularen und der Validierung von Dateneingaben. Entwickler können mithilfe der Yup-API Validierungsschemata erstellen und dabei die Form und Einschränkungen der erwarteten Daten angeben.

Einführung

Angenommen, Sie implementieren ein Formular, in das der Benutzer mehrere E-Mails eingeben kann. Sie müssen prüfen, ob jede E-Mail gültig ist, aber wie erstellen Sie eigentlich ein Schema, in dem jede E-Mail als E-Mail validiert wird?

import { object, string, array } from 'yup'

const schema = object({
  emails: array() //how do you validate each email in the array as an actual email? 
});

So validieren Sie Zeichenfolgen

Um Strings in yup zu validieren, müssen Sie die Funktion string() und ihre anderen Funktionen verwenden.

Wenn Sie beispielsweise eine gültige E-Mail-Adresse benötigen, können Sie einfach string().email() verwenden.

import { object, string, array } from 'yup'

const schema = object({
  email: string().email()
});

const isValid = schema.isValidSync({
    emails: ["", "@test.com"],
  });
console.log(isValid); //true which is wrong since they are clearly not emails

Wenn Sie ein Pflichtfeld benötigen, können Sie string().required() verwenden.

import { object, string, array } from 'yup'

const schema = object({
  requiredField: string().required()
});

Das ist ganz einfach, jetzt wenden wir es auf Arrays an.

So validieren Sie ein String-Array in Yup

Um ein Array von Zeichenfolgen in yup zu validieren, müssen Sie den Typ des Arrays angeben, das Sie validieren möchten, indem Sie die Funktion array().of() verwenden. Zum Beispiel:

import { object, string, array } from 'yup'

//1. create a simple validation schema for the string
const requiredEmail = string().email().required("Email is required");

//2. apply it to the array().of() function
const schema = object({
  emails: array().of(requiredEmail)
});

Wenn wir nun versuchen, es erneut anhand einiger Daten zu testen, erhalten wir die richtigen Ergebnisse:

let isValid = schema2.isValidSync({
  emails: ["", "@test.com"],
});
console.log(isValid); //false

isValid = schema2.isValidSync({
  emails: ["[email protected]", "[email protected]"],
});
console.log(isValid); //true

So validieren Sie ein Array anderer Typen

Ähnlich können Sie dieselbe Technik verwenden, wenn Sie ein Array von Zahlen oder einen beliebigen Typ validieren möchten. Zum Beispiel:

import { object, string, array, number, boolean } from "yup";

const requiredNumber = number().required();
const optionalBoolean = boolean().optional();
const user = object({
  firstName: string().required(),
  lastName: string().required(),
});
const schema3 = object({
  numbers: array().of(requiredNumber), // array of numbers
  booleans: array().of(optionalBoolean), //array of booleans
  users: array().of(user),  // array of objects
});

Das ist es im Grunde!

Abschluss

Sie haben gelernt, wie Sie mit Yup ein Array von Zeichenfolgen validieren. Sie haben außerdem gelernt, wie Sie Arrays anderer Typen validieren und mithilfe der Funktion array().of() komplexe Array-Schemata erstellen. Was auch immer Sie mit einem einzelnen Objekt tun können, Sie können es auch mit Arrays tun.