Einfache Verwendung des Vue Vee-Validate-Plugins

npm ich [email protected]

importiere { Formular, Feld } von 'vee-validate'

// Erstelle eine JS-Datei für den Export export default {
  // Artikelkonto verifizieren
  Konto(Wert) {
    if (!value) return 'darf nicht leer sein' // bedingtes Urteil,
    return true // Schließlich müssen alle übergebenen Werte true zurückgeben
  },
  Passwort (Wert) {
    if (!value) return 'Bitte geben Sie Ihr Passwort ein'
    if (!/^\w{6,24}$/.test(value)) return 'Das Passwort ist 6-24 Zeichen lang'
    returniere wahr
  },
  mobile (Wert) {
    if (!value) return 'Bitte geben Sie Ihre Telefonnummer ein'
    if (!/^1[3-9]\d{9}$/.test(value)) return 'Das Telefonnummernformat ist falsch'
    returniere wahr
  },
  Code (Wert) {
    if (!value) return 'Bitte geben Sie den Bestätigungscode ein'
    if (!/^\d{6}$/.test(value)) return 'Der Bestätigungscode besteht aus 6 Ziffern'
    returniere wahr
  },
  isAgree (Wert) {
    if (!value) return 'Bitte aktivieren Sie dieses Kontrollkästchen, um den Nutzungsbedingungen zuzustimmen.'
    returniere wahr
  }
}

// validation-schema="mySchema" konfiguriert Validierungsregeln // v-slot: Fehlerobjekt exportieren <Form
  :validation-schema="meinSchema"
  v-slot="{ Fehler }"
>
 <!-- Formularelemente -->
</Form>

<Skript>
  Schema importieren aus '@/utils/vee-validate-schema'
  aufstellen () {
    // Formularobjektdaten const form = reactive({
      Konto: null, // Kontokennwort: null // Kennwort })
    // Validierungsregelobjekt const mySchema = {
      Konto: schema.account,
      Passwort: schema.password
    }
    return { form, meinSchema }
 } 
</Skript>

//1. Ändern Sie die Eingabe in die Komponente „Feld“, die standardmäßig als Eingabe analysiert wird
//2. `Field` fügt das Attribut name hinzu, um anzugeben, welche Validierungsregel im Schema verwendet werden soll //3. `Field` fügt v-model hinzu, um eine bidirektionale Bindung von Formulardaten bereitzustellen //4. Wenn ein Formularvalidierungsfehler auftritt, wird der Fehlerklassenname `error` angezeigt und ein roter Rahmen <Field wird angezeigt
      v-model="Formular.Konto"
      Name="Konto" 
      Typ="Text"
      Platzhalter="Bitte geben Sie Ihren Benutzernamen ein"
      :class="{ error: errors.account }" // Wenn eine Fehlermeldung zurückgegeben wird, ist es wahr, den Klassenfehler anzuzeigen
    />
    <!-- <input type="text" placeholder="Bitte geben Sie Ihren Benutzernamen ein" /> -->

// An das Formular gebundene Daten const form = reactive({
  Konto: null, // Kontokennwort: null, // Kennwort isAgree: true // ob es ausgewählt ist})

// Deklarieren Sie die für das aktuelle Formular erforderlichen Validierungsdatenregeln const curSchema = reactive({
  Konto: schema.account, // Konto Passwort: schema.password, // Passwort isAgree: schema.isAgree // ob ausgewählt})