Handhabungsformulare und Validierung in Vue

Der Schlüssel zur Validierung des Formulars in VUE ist die Datenbindung, die Überprüfung der Logik und das Fehlerfeedback. Verwenden Sie V-Model, um Eingaben zu binden, z. Es wird empfohlen, einheitliche Objektverwaltungsfelder zu verwenden. Setzen Sie den Anfangswert auf leere oder angemessene Standardwerte. Kontrollkästchen können durch Arrays verarbeitet werden. Die Überprüfung kann beim Senden manuell durchgeführt werden, z. B. ValateMail (), um das Mailbox -Format zu überprüfen. Gemeinsame Überprüfungselemente umfassen nicht leere, Länge, Formatanpassung, Konsistenz usw.; Es wird empfohlen, Bibliotheken wie Vuelidate oder Veevalidate zu verwenden, um die Operationen zu vereinfachen, die deklarative Regeln, asynchrone Überprüfung und API -Integration der Zusammensetzung unterstützen. Fehlereinweisungen sollten spezifisch sein, z. B. "Bitte geben Sie eine gültige E -Mail -Adresse ein" und wählen Sie die entsprechende Auslöserzeit wie Onblur oder OnInput. Klare Struktur und ordnungsgemäße Werkzeuge können eine einfache und effiziente Form veranlagten.

Verarbeitungsformulare und Überprüfung sind in VUE nicht tatsächlich kompliziert, erfordert jedoch einige strukturierte Ideen. Der entscheidende Punkt ist, wie Sie Daten binden, die Überprüfungslogik und Feedback -Fehlerinformationen auslösen.

Verwenden Sie V-Model, um die Eingabe zu binden

Die grundlegendste und häufigste Möglichkeit ist die Verwendung von v-model , um das Eingabefeld und das Datenmodell zu verbinden. Zum Beispiel:

 <Eingabe v-Model = "Form.Email" Typ = "E-Mail" />

Auf diese Weise wird der Wert des Eingangsfelds automatisch in form.email synchronisiert, und das gleiche gilt für den anderen Weg. Dieser Mechanismus ist sehr bequem, insbesondere bei mehreren Feldern, mit denen Sie den Datenzustand zentral verwalten können.

Ein paar Tipps:

• Verwenden Sie ein Objekt (z. B. form ), um alle Felder einheitlich für eine einfache Verwaltung zu speichern.
• Versuchen Sie, den Anfangswert auf eine leere Zeichenfolge oder einen angemessenen Standardwert zu setzen, um undefinierte Probleme zu vermeiden.
• Für Kontrollkästchen oder mehrere Kontrollkästchen können Sie sie in Kombination mit einem Array verarbeiten.

Grundlegende Möglichkeiten zur Überprüfung des Formulars

Die Überprüfung erfolgt normalerweise vor der Einreichung. Sie können die Urteilslogik manuell schreiben oder die Bibliothek von Drittanbietern verwenden (später erwähnt). Der grundlegende Prozess ist normalerweise: Der Benutzer klickt auf Senden → Überprüfen Sie, ob jedes Feld den Regeln → eine Fehlermeldung angezeigt wird (falls vorhanden).

Lassen Sie uns ein einfaches Beispiel geben: Überprüfen Sie, ob die E -Mail -Adresse leer ist und ob das Format korrekt ist.

 Funktion ValateMail (E -Mail) {
  Wenn (! E -Mail) zurückgibt, kann der Mailbox nicht leer sein.
  const EmailRegex = /^[^\ s@]@[^\ s@] \. [^\ s@] $ /;
  if (! EmailRegex.test (E -Mail)) zurückgeben 'Das Mailbox -Format ist falsch';
  zurückkehren '';
}

Anschließend können Sie es in der Festungsfunktion aufrufen und die Fehlermeldung speichern und dem Benutzer anzeigen.

Gemeinsame Überprüfungselemente umfassen:

• Ist es leer oder nicht
• Längengrenze (wie Passwort mindestens 6 Ziffern)
• Formatanpassung (E -Mail, Handynummer usw.)
• Bestätigen Sie dasselbe (z. B. zweimal das Passwort eingeben)

Verwenden Sie die Verifizierungsbibliothek, um den Vorgang zu vereinfachen

Wenn Sie keine Überprüfungslogik von Grund auf selbst schreiben möchten, wird empfohlen, fertige Bibliotheken wie Vuelidate oder Veevalidate zu verwenden. Sie können Ihnen helfen, die Bestätigungsregeln eleganter zu organisieren und eine asynchrone Überprüfung zu unterstützen (z. B. Überprüfung, ob ein Benutzername bereits besetzt ist).

Nehmen Sie Vuelidate als Beispiel, Sie müssen nur die Regeln deklarieren, und es wird automatisch den Status verfolgen:

 Importieren Sie UseVuelidat von '@vuelidate/core'
Importieren {erforderlich, E -Mail} aus '@vuelidate/validators' '

Standard ausführen {
  aufstellen() {
    const form = reactive ({{{
      E -Mail: '',
    })

    const regieren = {
      E -Mail: {erforderlich, E -Mail},
    }

    const v $ = useVuelidate (Regeln, Formular)

    Rückgabe {Form, v $}
  }
}

Auf diese Weise können Sie v$.email.$error verwenden, um festzustellen, ob Fehler vorliegen und die entsprechende Eingabeaufforderung anzeigen.

Die Vorteile dieser Bibliotheken sind:

• Klare Struktur, leicht zu warten
• Unterstützt mehrere integrierte Regeln
• Starke Skalierbarkeit, Anpassungsregeln anpassen
• Sehr gut mit Vue3 -Kompositions -API

Fehleraufforderungen sollten freundlich und aktuell sein

Vergessen Sie schließlich nicht das Design der Fehleraufforderung. Zeigen Sie nicht nur vage Informationen wie "ungültige Eingabe" an, sondern sagen Sie dem Benutzer, was falsch ist und wie er sie ändern soll. Zum Beispiel: "Bitte geben Sie eine gültige E -Mail -Adresse ein, z. B. Beispiel@example.com".

Der Zeitpunkt der Eingabeaufforderungen ist ebenfalls wichtig. Es gibt normalerweise drei Situationen:

• Wenn der Eingabefeld den Fokus verliert (Onblur)
• Echtzeitüberprüfung während des Eingabeprozesses (OnInput)
• Einheitliche Inspektion bei der Einreichung

Sie können den richtigen Weg entsprechend der Szene auswählen. Beispielsweise kann die Kennwortstärke in Echtzeit bei der Eingabe aufgefordert werden, während andere Felder bei der Übermittlung möglicherweise besser für eine einheitliche Überprüfung geeignet sind.

Grundsätzlich ist das. Formüberprüfung sieht viele Details aus, aber solange die Struktur klar ist und die Werkzeuge angemessen sind, ist es nicht schwierig.

Das obige ist der detaillierte Inhalt vonHandhabungsformulare und Validierung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!