Wie gehe ich mit Formularen und Validierung in Vue um?

Verwenden Sie V-Model, um Formulardaten zu binden, um eine Zwei-Wege-Antwort zu erreichen. 2.. Implementieren Sie die grundlegende Überprüfung manuell durch berechnete Attribute und Anzeigenfehlermeldungen; 3. Für komplexe Formulare wird empfohlen, Veevalidat zu verwenden, um Überprüfungsregeln in Kombination mit YUP zu definieren, um die Wartbarkeit zu verbessern. 4. Die Optimierung der Benutzererfahrung sollte die Überprüfung bei der Übermittlung oder des Ausschusses, bei der Deaktivierung wiederholter Einreichungen, des Zurücksetzens des Formulars und des Anzeigens des Laststatus und der Sicherstellung der Integrität der Formdaten und der Benutzerwechselwirkungsflüssigkeit enthalten.

Die Handhabungsformulare und Validierung in Vue.js ist eine häufige Aufgabe, und die Benutzererfahrung und die Datenintegrität verbessert dies gut. Hier erfahren Sie, wie Sie es effektiv mit Vue 3 (Kompositions -API) mit oder ohne externe Bibliotheken verwalten können.

1. Grundformularhandhabung mit V-Model

Verwenden Sie v-model , um Formulareingänge an reaktive Daten zu binden. Dadurch wird Ihr Formular status synchron mit den Daten Ihrer Komponente synchronisiert.

 <Script setup>
importieren {ref} aus &#39;Vue&#39;

const form = ref ({{{
  Name: &#39;&#39;,
  E -Mail: &#39;&#39;,
  Passwort: &#39;&#39;
})

const handlesubmit = () => {
  console.log (&#39;Formular eingereicht:&#39;, Form.Value)
  // Einreichungslogik hinzufügen (z. B. API -Anruf)
}
</script>

<Semplate>
  <Formular @suble.prevent = "gradeSubmit">
    <input v-Model = "Form.Name" Typ = "Text" Placeholder = "Name" erforderlich />
    <Eingabe v-Model = "Form.Email" Typ = "E-Mail" placeholder = "E-Mail" erforderlich />
    <input v-Model = "Form.Password" Typ = "Passwort" Placeholder = "Passwort" erforderlich />
    <button type = "senden"> senden </button>
  </form>
</template>

• @submit.prevent veraltet die Seite nach dem Nachladen.
• v-model liefert eine bow-Wege-Bindung.

2. Einfache Inline -Validierung (keine Bibliothek)

Sie können eine grundlegende Validierung mithilfe von berechneten Eigenschaften oder Funktionen manuell implementieren.

 <Script setup>
Import {Ref, berechnet} aus &#39;Vue&#39; &#39;

const form = ref ({{{
  Name: &#39;&#39;,
  E -Mail: &#39;&#39;,
  Passwort: &#39;&#39;
})

const fehlern = cutted (() => {
  const errs = {}
  if (! form.value.name) errs.name = &#39;Name ist erforderlich&#39;
  if (! form.value.email) {
    Errs.Email = &#39;E -Mail ist erforderlich&#39;
  } else if (!/^\ s @\ s \. \ s $/. test (Form.Value.Email)) {
    errs.email = &#39;E -Mail ist ungültig&#39;
  }
  if (! Form.Value.Password || Form.Value.Password.length <6) {
    Errs.Password = &#39;Passwort muss mindestens 6 Zeichen betragen&#39;
  }
  Rücksende zurück
})

const isvalid = compinced (() => object.keys (fehler.Value) .Length === 0)

const handlesubmit = () => {
  if (isvalid.value) {
    console.log (&#39;Formular ist gültig:&#39;, Form.Value)
    // Logik einreichen
  } anders {
    console.log (&#39;Formular hat Fehler:&#39;, fehler.Value)
  }
}
</script>

<Semplate>
  <Formular @suble.prevent = "gradeSubmit">
    <input v-model = "Form.Name" type = "text" placeholder = "name" />
    <div v-if = "fehler.name" class = "error"> {{fehler.name}} </div>

    <input v-Model = "Form.Email" Typ = "E-Mail" Placeholder = "E-Mail" />
    <div v-if = "fehler.email" class = "error"> {{fehler.email}} </div>

    <input v-Model = "Form.Password" Typ = "Passwort" Placeholder = "Passwort" />
    <div v-if = "fehler.password" class = "error"> {{fehler.password}} </div>

    <Button type = "Senden": diAlted = "! Isvalid"> Senden </button>
  </form>
</template>

<Styles>
.Fehler {
  Farbe: Rot;
  Schriftgröße: 0,8EM;
}
</style>

Dieser Ansatz funktioniert gut für kleine Formen und gibt Ihnen die volle Kontrolle.

3.. Verwenden einer Validierungsbibliothek (empfohlen für größere Apps)

Verwenden Sie für komplexe Formulare eine Bibliothek wie Veevalidat mit YUP für schema-basierte Validierung.

Abhängigkeiten installieren:

 npm install yup @vee-Validate/Regeln @vee-Validate/Form @vee-Validate/yup

Beispiel mit veevalidat yup:

 <Script setup>
{useForm} aus &#39;Vee-Validat&#39; importieren &#39;
Import * als yup von &#39;yup&#39;

// Schema definieren
const schema = yup.object ({{
  Name: yup.string (). Erforderlich (&#39;Name ist erforderlich&#39;),
  E -Mail: yup.string (). E -Mail (&#39;ungültiges E -Mail&#39;). Erforderlich (&#39;E -Mail ist erforderlich&#39;),
  Passwort: yup.string (). min (6, &#39;min 6 Zeichen&#39;). Erforderlich (&#39;Passwort ist erforderlich&#39;))
})

// Formular verwenden
const {definefield, HandlesSubmit, Fehler} = useForm ({{{{
  ValidationSchema: Schema
})

const [name, nameattrs] = definusfield (&#39;name&#39;)
const [E -Mail, E -MailAttrs] = DefineField (&#39;E -Mail&#39;)
const [Passwort, PasswordAttrs] = DefInefield (&#39;Passwort&#39;)

Konstant
  console.log (&#39;gültige Formulardaten&#39;, Werte)
})
</script>

<Semplate>
  <Formular @Subjekt = "OnSubmit">
    <input v-model = "name" v-bind = "nameattrs" type = "text" placeholder = "name" />
    <div v-if = "fehler.name" class = "error"> {{fehler.name}} </div>

    <input v-Model = "E-Mail" v-bind = "E-MailAttrs" Typ = "E-Mail" Placeholder = "E-Mail" />
    <div v-if = "fehler.email" class = "error"> {{fehler.email}} </div>

    <input v-Model = "Passwort" v-bind = "passwordattrs" type = "password" placeholder = "password" />
    <div v-if = "fehler.password" class = "error"> {{fehler.password}} </div>

    <button type = "senden"> senden </button>
  </form>
</template>

Vorteile:

• Wiederverwendbare Validierungsschemata
• Integrierte Regeln (E-Mail, min, max usw.)
• Async -Validierungsunterstützung
• Bessere Fehlerbehandlung und UX

4. Tipps für bessere Form UX

• Zeigen Sie Fehler auf Blur oder Senden , nicht auf jedem Tastenanschlag.
• Deaktivieren Sie die Schaltfläche Senden, wenn das Formular ungültig ist oder einreichen.
• Das Formular nach erfolgreicher Einreichung zurücksetzen :

   Form.Value = {Name: '', E -Mail: '', Passwort: ''}

• Verwenden Sie Ladezustände während der asynchronen Abgaben.
• Geben Sie klare Fehlermeldungen an.

---

Beginnen Sie im Grunde genommen einfach mit v-model und manuellen Schecks für kleine Formulare. Wenn die Komplexität wächst, wechseln Sie zur veevalidierten Yup, um eine skalierbare Validierung zu erhalten. Es ist nicht schwer, sich einzurichten und spart viel Zeit runter.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit Formularen und Validierung in Vue um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!