Muster für manuelle Validierung
Reaktive Fehlerobjekte, Validierung bei blur vs. submit, Abgleich der Passwortbestätigung.
Muster für manuelle Validierung ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Validierung ohne Bibliothek
Bei einfachen Formularen können Sie die Validierung mithilfe eines reaktiven Zustands selbst durchführen. Sie verfolgen Fehler, führen Prüfungen beim Absenden oder beim Verlassen eines Feldes durch und zeigen Meldungen mit Direktiven an. So lernen Sie die Grundlagen kennen, auf denen jede Bibliothek aufbaut.
Ein errors-Objekt
Verwenden Sie ein reaktives errors-Objekt, dessen Schlüssel den Feldnamen entsprechen. Eine leere Zeichenfolge (oder ein fehlender Schlüssel) bedeutet, dass kein Fehler vorliegt.
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>Eine validate-Funktion
Schreiben Sie eine validate-Funktion, die jedes Feld prüft und Meldungen im errors-Objekt setzt. Geben Sie zurück, ob das Formular gültig ist.
<script setup>
function validate() {
errors.name = form.name ? '' : 'Name is required'
errors.email = form.email.includes('@') ? '' : 'Invalid email'
return !errors.name && !errors.email
}
</script>Validierung beim Absenden
Rufen Sie validate am Anfang Ihres Submit-Handlers auf und brechen Sie ab, wenn die Validierung fehlschlägt. So wird garantiert, dass keine ungültigen Daten gesendet werden.
<script setup>
function onSubmit() {
if (!validate()) return
// proceed to send
}
</script>Validierung einzelner Felder beim Verlassen
Wenn Sie nur beim Absenden validieren, kann sich das langsam anfühlen. Validieren Sie ein einzelnes Feld, sobald der Benutzer es verlässt, indem Sie @blur für sofortiges Feedback verwenden.
<script setup>
function validateName() {
errors.name = form.name ? '' : 'Name is required'
}
</script>
<template>
<input v-model="form.name" @blur="validateName" />
</template>Fehlermeldungen anzeigen
Verwenden Sie v-if, um eine Meldung nur dann anzuzeigen, wenn für das betreffende Feld ein Fehler vorliegt. Platzieren Sie sie in der Nähe des Eingabefelds.
<template>
<input v-model="form.name" @blur="validateName" />
<span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>Ungültige Felder formatieren
Binden Sie eine Klasse mithilfe der Objektsyntax, um bei einem vorhandenen Fehler einen roten Rahmen hinzuzufügen. Die Klasse wird nur angewendet, solange errors.name einen truthy Wert hat.
<input
v-model="form.name"
:class="{ error: errors.name }"
@blur="validateName"
/>Der error-Stil
Eine kleine CSS-Regel vervollständigt das Erscheinungsbild – ein roter Rahmen signalisiert, dass das Feld Aufmerksamkeit erfordert.
<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>Abgeleitete Gültigkeit
Leiten Sie mit computed ein übergreifendes Gültigkeits-Flag ab, um den Absende-Button reaktiv zu aktivieren oder zu deaktivieren.
<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>
<template>
<button :disabled="!isValid">Submit</button>
</template>Stärken und Grenzen
Die manuelle Validierung ist transparent und kommt ohne Abhängigkeiten aus – ideal für kleine Formulare. Mit zunehmender Anzahl der Regeln – etwa bei Prüfungen über mehrere Felder, asynchroner Validierung oder vielen Feldern – wächst jedoch auch der zusätzliche Code. Deshalb gibt es Bibliotheken.
Zusammenfassung des Validierungsablaufs
Das Muster lautet: reaktive Fehler, eine validate-Funktion, Ausführung beim Absenden (und optional beim Verlassen eines Feldes), Anzeige der Meldungen mit v-if und Formatierung mit einer bedingten Klasse.
Schnelltest
Testen Sie Ihr Wissen zur manuellen Validierung.
Zusammenfassung
Muster für die manuelle Validierung:
- Verwenden Sie ein reaktives
errors-Objekt mit den Feldern als Schlüsseln. - Eine
validate-Funktion setzt Meldungen und gibt die Gültigkeit zurück. - Validieren Sie beim Absenden und einzelne Felder für schnelles Feedback mit
@blur. - Zeigen Sie Meldungen mit
v-if="errors.x"an und formatieren Sie sie mit:class="{ error: errors.x }".
Häufig gestellte Fragen
Ist die Lektion „Muster für manuelle Validierung“ kostenlos?
Ja — der vollständige Text von „Muster für manuelle 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 „Muster für manuelle Validierung“?
Reaktive Fehlerobjekte, Validierung bei blur vs. submit, Abgleich der Passwortbestätigung. 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 3 von 4.
Wie lange dauert die Lektion „Muster für manuelle 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
- v-model für alle Formularelemente
- Formular absenden und zurücksetzen
- Muster für manuelle Validierung
- VeeValidate für schema-basierte Validierung