VeeValidate

Formulare fühlen sich manchmal wie verschiedene USB-Formate an: Einige sind intuitiv, doch viele wollen dreimal gedreht werden, bis sie endlich passen.

Um dieses Problem für Nutzer und Entwickler zu lösen, haben sich einige Bibliotheken im Vue-Universum etabliert. Darunter auch VeeValidate, welche wir euch einmal vorstellen möchten.

VeeValidate 3

In der dritten Version können die Validierungsregeln global registriert werden, dies könnte wie folgt aussehen:

import %7B extend %7D from 'vee-validate'

// Wir erweitern das Regelwerk von VeeValidate
// indem wir die "extend" Funktion aufrufen.
extend('min', %7B
  // Über den Parameter "params" können wir bestimmen,
  // welche Werte der "validate" Funktion übergeben werden.
  params: ['length'],
  // Über den Parameter "message" können wir dem Nutzer eine
  // leicht verständliche Fehlernachricht anzeigen.
  message: 'The %7B_field_%7D field must have at least %7Bmin%7D characters',
  validate(value, params) %7B
    // Hier schauen wir, ob der Parameter "length"
    // auch wirklich übergeben worden ist.
    if (!params.length) %7B
      throw new Error('The "length" parameter is required, but not defined')
    %7D

    // Zum Schluss wird der Inhalt abgeglichen und validiert
    return value && value.length >= params.length
  %7D
%7D)

In der Vue-Komponente können wir nun die neu definierte min Regel an ein input Element binden.

<template>
 <!--
    Über "rules" können wir unsere "min" Regel an das
    &lt;input /&gt; Element binden. Wichtig ist auch die Übergabe
    der Mindestanzahl. Dies erfolgt durch einen Doppelpunkt,
    gefolgt von einer "3".
 -->
  &lt;ValidationProvider rules="min:3" v-slot="%7B errors %7D"&gt;
    &lt;input v-model="value" type="text" /&gt;
    &lt;span v-if="errors.length &gt; 0">%7B%7B errors[0] %7D%7D&lt;/span&gt;
  &lt;/ValidationProvider&gt;
&lt;/template&gt;

Hat man sich erstmal ein entsprechendes Regelwerk aufgebaut, kann man die Regeln mit der Pipe | kombinieren. Schnell findet sich so was wie rules="required|min:6|email" zusammen.

VeeValidate 4

In der vierten Version macht VeeValidate den Schwenk zur Composition-Api. Auf den ersten Blick ist die neue Strukturierung klarer! Der Weg für einfache Funktionen wird geebnet und die wilden Laravel ähnlichen Regeln rücken zusammen mit dem ValidationProvider in den Hintergrund.

Schauen wir doch einmal in eine gekapselte Input-Komponente.

<template>
  <div>
    <!-- 
      Kein ValidationProvider sowie v-slot="%7B errors %7D" Voodoo in Sichtweite.
      Ihr könnt die übergebenen Werte direkt einsetzen.
    -->
    &lt;input type="text" v-model="value" /&gt;
    &lt;span v-if="errorMessage"&gt;%7B%7B errorMessage %7D%7D&lt;/span&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import %7B useField %7D from 'vee-validate'
import %7B createMinRule %7D from './rules/createMinRule'

const minRule = createMinRule(6)

export default %7B
  name: 'MinFieldInput',
  setup() %7B
    // Der "useField" Hook wird aufgerufen,
    // welcher Zugang zum Wert und der Fehlernachricht bietet.
    const %7B value, errorMessage %7D = useField('minField', minRule)

    // Zu guter letzt werden die genannten Daten
    // dem Template zur Verfügung gestellt.
    return %7B
      value,
      errorMessage,
    %7D
  %7D,
%7D
&lt;/script&gt;

// Eine weitere Funktion kann z.B. createMinRule sein,
// welche die "min" Funktion implementiert.
function createMinRule(length) %7B
  return function(value) %7B
    if (!min(value, length)) %7B
      // Wird ein string wiedergegeben,
      // ist es für VeeValidate ein Signal, dass beim Überprüfen
      // ein Fehler aufgetreten ist.     
      return `The field must have at least $%7Blength%7D characters`
    %7D

    return true
  %7D
%7D

// "min" ist eine einfache Funktion
// und kann sehr leicht per Unit-Test überprüft werden.
function min(value, length) %7B
  return value.length >= length
%7D

Sollte euch dieser eine neue Aufbau nicht überzeugt haben, könnt ihr in der vierten Iteration weiterhin den Ansatz von VeeValidate 3 nutzen. Schaut dazu sehr gerne in die offizielle Dokumentation und gebt dieser Bibliothek eine wohl verdiente Chance.

Heißer Tip für Entwickler die gerne zwischen Vue und React hüpfen. VeeValidate akzeptiert wie Formik ein yup Schema. Dadurch ist der Einstieg für Unvertraute deutlich einfacher.

Kurze Zusammenfassung zu VeeValidate 4:

• ca. 5Kb verpackt im gzip Format
• Keine Abhängigkeiten
• Tree-Shakeable
• TypeScript als Sprache der Wahl
• 25+ eingebaute Regeln
• 45+ eingebaute Übersetzungen
• Knapp eine Million tägliche Downloads auf NPM
• 8.000+ Sterne bei GitHub