Mobile-Menu

Das Javascript-Framework Vue.js, Teil 12 Vue-Validierung mit VeeValidate

Von Dr. Dirk Koller 4 min Lesedauer

Eingabeformulare von Hand zu überprüfen, ist aufwendig und fehlerträchtig. Für diese Standardaufgabe bietet sich bei Vue.js-Anwendungen die Bibliothek VeeValidate an.

VeeValidate soll den notwendigen Prozess der Formulareingaben-Validierung deutlich einfacher gestalten.(Bild: https://github.com/topics/vee-validate)
VeeValidate soll den notwendigen Prozess der Formulareingaben-Validierung deutlich einfacher gestalten.
(Bild: https://github.com/topics/vee-validate)

Mit VeeValidate lassen sich einzelne Felder oder ganze Formulare Client-seitig einfach und deklarativ validieren. Grundlage für diesen Beitrag ist eine Vue-3-App, wie sie mit dem aktuellen Vue-CLI (Preset „Default“) schnell erzeugt werden kann:

vue create vee-validate-app

Die dazu passende Version von VeeValidate ist 4.x. Die Installation mit npm erfolgt durch die Eingabe des folgenden Kommandos im Verzeichnis des zuvor angelegten Projekts:

npm install vee-validate --save

Damit ist die Validierungsbibliothek bereit für den Einsatz.

VeeValidate-Komponenten: Form und Field

VeeValidate stellt zum Erstellen der Formulare einige neue Komponenten zur Verfügung, darunter Form und Field. Erwartungsgemäß repräsentiert Form das ganze Formular und Field ein darin enthaltenes Textfeld. Ein einfaches Formular zum Eingeben eines Namens sieht damit folgendermaßen aus:

<template>
  <div id="app">
    <Form @submit="onSubmit">
      <Field name="firstname" />
      <button>Abschicken</button>
    </Form>
  </div>
</template>

Im Script-Teil werden die Komponenten Form und Field importiert und registriert. Die onSubmit-Methode gibt hier die Formulardaten in der Konsole aus:

<script>
import { Form, Field } from "vee-validate";
export default {
  components: {
    Form,
    Field,
  },
  methods: {
    onSubmit(values) {
      console.log(values);
    },
  },
};
</script>

Die Validierung erfolgt mithilfe von Funktionen. Hier lässt sich beispielsweise prüfen, ob ein Pflichtfeld befüllt wurde oder das Format einer Eingabe dem einer E-Mail entspricht. Die Funktion gibt „true“ zurück, wenn die Validierung erfolgreich war. Ist das nicht der Fall, wird stattdessen ein Fehlermeldungs-String zurückgegeben:

methods: {
  required(value) {
    return !value ? "Pflichtfeld" : true;
  },

Die Validierungsmethode wird anschließend dem betroffenen Field als rules-Prop gesetzt:

<Field name="firstname" type="firstname" :rules="required"/>

Fehlermeldungen mit ErrorMessage

Nach dem Hinzufügen der Regel wird beim Klick auf den Button die Übertragung nur noch ausgeführt, wenn die Regel auch erfüllt ist (das merkt man beim Nachvollziehen an der dann nicht mehr vorhandenen Log-Ausgabe). Dummerweise bekommt der Benutzer das Problem nicht mit, es fehlt ein entsprechender Hinweis.

Dieser wird mit der Komponente ErrorMessage generiert, die vor der Verwendung natürlich ebenfalls importiert und registriert sein will. Mithilfe des Attributes name wird die Komponente spezifiziert, für die eine Fehlermeldung ausgegeben werden soll:

<ErrorMessage name="firstname" />

Das Formular mit Fehlermeldung.(Bild: Dr. Koller)
Das Formular mit Fehlermeldung.
(Bild: Dr. Koller)

An der Stelle der ErrorMessage-Komponente wird auf der resultierenden HTML-Seite nun der Fehlertext (hier ‚Pflichtfeld‘ ausgegeben. Die Ausgabe sieht noch nicht besonders schick aus, aber die optische Aufbereitung fällt nicht in den Aufgabenbereich von VeeValidate.

Globale Validatoren

Hat man mehrere Formulare in der Anwendung möchte man die wiederholte Formulierung der Regeln in jeder Komponente vermeiden. Dazu stellt VeeValidate globale Validatoren zur Verfügung, die mit der Funktion defineRule definiert werden. Der erste Parameter von defineRule ist der Name des Validators, danach folgt die Funktion, die den zu prüfenden Wert übergeben bekommt:

import { defineRule } from 'vee-validate';defineRule('required', value => {
  return !value ? "Pflichtfeld" : true;
});

Damit die Regeln überall zur Verfügung stehen, sollten sie zu einem möglichst frühen Zeitpunkt in der App definiert werden, am besten in src/main.js. Die Verwendung erfolgt wiederum über die Rules-Prop von Field:

<Field name="firstname" rules="required"/>

Validatoren von der Stange: Yup

Das Formulieren der Regeln lässt sich mit Yup, einer beliebten JavaScript-Bibliothek von JQuense, weiter vereinfachen. Die Installation von Yup erfolgt hier ebenfalls mit npm:

npm install -S yup

Der Test auf ein Pflichtfeld sieht mit Yup formuliert folgendermaßen aus:

import * as yup from 'yup';
...
data() {
  return {
    required: yup.string().required("Pflichtfeld"),
  }
},

Im einfachen Fall der required-Prüfung ist der Vorteil gegenüber der eigenen Funktion noch überschaubar. In komplexeren Validierungen sind die Yup-Ausdrücke aber besser lesbar und vor allen Dingen schon getestet. Prüfungen auf E-Mail (yup.string().email()), URL (yup.string().url()) oder auch die Kombination mehrerer Bedingungen wie ein Feld für das Alter (yup.number().required().positive().integer()) sind damit schnell und zuverlässig beschrieben.

Da die gesammelten Yup-Validatoren vom Platzbedarf recht umfangreich sind, empfiehlt es sich in der Praxis, nur die wirklich benutzen Methoden zu importieren:

import { string } from 'yup';
...
data() {
  return {
    required: string().required("Pflichtfeld"),
  }
},

Die Möglichkeiten von Yup gehen weit über das Prüfen einzelner Felder hinaus. Es ist beispielsweise möglich ganze Schemata bestehend aus mehreren Bedingungen zu konstruieren und Objekte gegen diese zu validieren. Auch die Möglichkeit, Fehlermeldungen zu internationalisieren ist enthalten. Beispiele dazu finden sich in der Yup-Doku.

VeeValidate ist im Zusammenspiel mit Yup eine mächtige Lösung zur Validierung von Formulareingaben. Es gibt die Bibliothek in zwei ‘Geschmacksrichtungen’: Die „High-Level“ Components-Variante ist gut geeignet für einfache UIs mit Standard-HTML-Elementen. Wenn es komplexer wird und eigene Formular-Komponenten validiert werden sollen, bietet die Variante Composition-API Vorteile. Details dazu sind im Guide enthalten.

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu Cloud Computing

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung. Die Einwilligungserklärung bezieht sich u. a. auf die Zusendung von redaktionellen Newslettern per E-Mail und auf den Datenabgleich zu Marketingzwecken mit ausgewählten Werbepartnern (z. B. LinkedIn, Google, Meta).

Aufklappen für Details zu Ihrer Einwilligung

(ID:48461310)

Weiterführende Inhalte