0Pricing
Vue Academy · Lektion

VeeValidate für schema-basierte Validierung

useForm(), useField(), yup-Schemas, Fehlermeldungen, Umgang mit asynchroner Validierung.

VeeValidate für schema-basierte Validierung ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Mit VeeValidate skalieren

Wenn Formulare wachsen, wird selbst geschriebene Validierung mühsam. VeeValidate ist eine beliebte Vue-Bibliothek, die den Formularzustand verwaltet, die Validierung anhand eines Schemas durchführt und Fehler reaktiv bereitstellt.

Schema-basierte Validierung

Anstatt Prüfungen von Hand zu schreiben, beschreiben Sie Regeln deklarativ in einem Schema. Wenn Sie VeeValidate mit yup kombinieren, können Sie dieses Schema auf fluente Weise erstellen.

<script setup>
import * as yup from 'yup'
const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required()
})
</script>

Das Formular mit useForm einrichten

useForm initialisiert den formularweiten Zustand und die Validierung. Übergeben Sie Ihr Schema als validationSchema, und die Funktion verknüpft alles miteinander.

<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
  validationSchema: schema
})
</script>

Ein Feld mit useField verbinden

useField registriert ein Eingabefeld anhand seines Namens. Die Funktion gibt den value des Feldes, seine errorMessage und einen handleBlur-Handler zurück.

<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>

Das Feld im Template binden

Binden Sie den zurückgegebenen value mit v-model und verknüpfen Sie @blur mit handleBlur, um beim Verlassen des Feldes zu validieren.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span>{{ errorMessage }}</span>
</template>

Die Fehlermeldung anzeigen

Jedes Feld stellt eine eigene errorMessage bereit, die eine reaktive Zeichenfolge ist. Bei einem gültigen Feld ist sie leer, bei einem ungültigen Feld enthält sie die Meldung aus dem Schema.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>

Das Absenden verarbeiten

handleSubmit umschließt Ihre Submit-Funktion. Zuerst wird die Validierung ausgeführt, und Ihre Callback-Funktion wird nur dann mit den Werten aufgerufen, wenn das gesamte Formular gültig ist.

<script setup>
const onSubmit = handleSubmit((values) => {
  console.log('valid form', values)
})
</script>

<template>
  <form @submit="onSubmit">...</form>
</template>

Formularweite Fehler

Das errors-Objekt aus useForm ordnet Feldnamen ihren aktuellen Meldungen zu und eignet sich beispielsweise für eine Zusammenfassung oder eine bedingte Benutzeroberfläche.

<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>

Warum eine Bibliothek verwenden

  • Deklarative Schemas ersetzen wiederholte manuelle Prüfungen.
  • Integrierte Zeitpunkte für die Validierung beim Verlassen, bei Änderungen und beim Absenden.
  • Ein errorMessage pro Feld und formularweite errors.
  • Einfache asynchrone und feldübergreifende Regeln mit yup.

Komponenten im Vergleich zur Composition API

VeeValidate bietet auch die Komponenten <Form> und <Field> für einen template-orientierten Stil. Die Composition-Funktionen useForm und useField passen besser zu <script setup> und geben Ihnen mehr Kontrolle.

Manuell im Vergleich zu schema-basiert

Die manuelle Validierung vermittelt die Grundlagen und eignet sich für sehr kleine Formulare. Die schema-basierte Validierung mit VeeValidate und yup lässt sich auf große, komplexe Formulare skalieren – mit deutlich weniger Code und Fehlern.

Schnelltest

Testen Sie Ihr Wissen zu VeeValidate.

Zusammenfassung

Schema-basierte Validierung mit VeeValidate:

  • Beschreiben Sie Regeln in einem yup-Schema, das als validationSchema übergeben wird.
  • useForm verwaltet den Formularzustand, errors und handleSubmit.
  • useField gibt für jedes Eingabefeld value, errorMessage und handleBlur zurück.
  • Die Lösung lässt sich für große Formulare deutlich besser skalieren als die manuelle Validierung.

Häufig gestellte Fragen

Ist die Lektion „VeeValidate für schema-basierte Validierung“ kostenlos?

Ja — der vollständige Text von „VeeValidate für schema-basierte Validierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „VeeValidate für schema-basierte Validierung“?

useForm(), useField(), yup-Schemas, Fehlermeldungen, Umgang mit asynchroner Validierung. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „VeeValidate für schema-basierte Validierung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. v-model für alle Formularelemente
  2. Formular absenden und zurücksetzen
  3. Muster für manuelle Validierung
  4. VeeValidate für schema-basierte Validierung
← Zurück zu Vue Academy