Vue verwendet Regeln zur Implementierung der Formularfeldvalidierung

Vue verwendet Regeln zur Implementierung der Formularfeldvalidierung

Es gibt viele Möglichkeiten, Formularfelder in Vue zu schreiben und zu validieren. Dieser Blog stellt drei weitere häufig verwendete Validierungsmethoden vor.

1. Daten zur Überprüfung eintragen

Formularinhalte

<!-- Formular -->
<el-form ref="RegelnForm" :Regeln="FormRegeln" :model="RegelnForm" label-width="200px">
    <el-form-item label="Benutzername:" prop="Benutzername">
       <el-input v-model="rulesForm.Benutzername" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>
  • <el-form>: bedeutet, dass es sich um ein Formular handelt
  • <el-form> -> ref: der Name des Formulars, wenn darauf verwiesen wird, Identifikation
  • <el-form> -> Regeln: Regeln zur Formularvalidierung
  • <el-form> -> Modell: Formulardatenobjekt
  • <el-form> -> label-width: Die Breite der Beschriftung des Formularfelds. Das Formularelement, das ein direktes untergeordnetes Element von Form ist, erbt diesen Wert.
  • <el-form> -> <el-form-item>: jedes Unterelement im Formular
  • <el-form-item> -> label: Beschriftungstext
  • <el-form-item> -> prop: Formularfeld-Modellfeld. Dieses Attribut ist erforderlich, wenn die Methoden validate und resetFields verwendet werden.
  • <el-input>: Eingabefeld
  • <el-input> -> v-model: Eigenschaften gebundener Formulardatenobjekte
  • <el-input> -> Stil: Inline-Stil
  • <el-input> -> maxlength: Maximale Zeichenlängenbegrenzung

Daten

Daten() {
    zurückkehren {
        //Andere Datendefinitionen weglassen...
        
        // Formularvalidierung formRules: {
            Benutzername: [
                {erforderlich: true,Nachricht: "Bitte geben Sie Ihren Benutzernamen ein",Trigger: "blur"}
            ]
        }
    }
}
  • formRules: Gleich wie der :rules-Attributwert des <el-form>-Formulars in „Formularinhalt“ oben
  • userName: Gleich wie der Prop-Attributwert des Formularunterelements <el-form-item> in „Formularinhalt“ oben
  • Verifizierungsinhalt ist: erforderlich, Verifizierung bei Fokusverlust, wenn leer, Eingabeaufforderungsmeldung „Bitte Benutzernamen eingeben“

2. Inline schreiben

Formularinhalte

<!-- Formular -->
<el-form ref="RegelnForm" :Regeln="FormRegeln" :model="RegelnForm" label-width="200px">
    <el-form-item label="Bankname:" prop="accountName" :rules="[{required:true,message:'Bitte geben Sie den Banknamen ein',trigger:'blur'}]">
        <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>
  • <el-form-item> -> Regeln: Die Wirkung ist die gleiche wie bei der ersten Methode, aber die Schreibmethode ist anders, deshalb werde ich hier nicht ins Detail gehen.

Daten Daten haben keinen Inhalt

3. Extern definierte Regeln importieren

Formularinhalte

<!-- Formular -->
<el-form ref="RegelnForm" :Regeln="FormRegeln" :model="RegelnForm" label-width="200px">
    <el-form-item label="Bankkartennummer:" prop="Kontonummer">
       <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="19"/>
    </el-form-item>
</el-form>

Der Formularinhalt entspricht der ersten Methode, daher werde ich hier nicht näher darauf eingehen.

Skriptinhalt

<Skript>
// Einführung externer Validierungsregeln import { validateAccountNumber } from "@/utils/validate";
 
// Bestimmen Sie, ob das Bankkartenkonto korrekt ist const validatorAccountNumber = (rule, value, callback) => {
  wenn (!Wert) {
    return callback(new Error("Bitte geben Sie Ihre Kontoinformationen ein"));
  } anders {
    wenn (validateAccountNumber(Wert)) {
      Rückruf();
    } anders {
      return callback(new Error('Falsches Kontoformat'))
    }
  }
};
 
Standard exportieren {
    Daten() {
        zurückkehren {
            //Andere Datendefinitionen weglassen...
        
            // Formularvalidierung formRules: {
                Kontonummer: [
                    {erforderlich: true, Validator: validatorAccountNumber, Auslöser: "blur"}
                ]
            }
        }
    }
}
</Skript>
  • Import: Zuerst externe Validierungsregeln einführen
  • const: definiert eine Regelkonstante. Der Konstantenname ist variabel. '= (rule, value, callback) => {}' ist ein festes Format. Der Wertparameter ist der zu überprüfende Feldwert.
  • formRules -> accountNumber: Verwenden Sie den Validator bei der Formularvalidierung, um den Namen der benutzerdefinierten Validierungsregelkonstante anzugeben

validieren.js

/* Bankkonto */
Exportfunktion validateAccountNumber(str) {
  const reg = /^([1-9]{1})(\d{14}|\d{18})$/
  return reg.test(str)
}
  • Validierungsregeln

Bei den oben genannten Überprüfungen handelt es sich um Überprüfungen bei Fokusverlust. Lassen Sie uns analysieren, wie überprüft wird, wann das Formular übermittelt wird.

1. Absenden-Button des Formulars

<!-- Formular -->
<el-form ref="RegelnForm" :Regeln="FormRegeln" :model="RegelnForm" label-width="200px">
    <el-form-item>
        <el-button type="primary" @click="onSubmit('rulesForm')">Speichern</el-button>
        <el-button @click="cancel">Abbrechen</el-button>
    </el-form-item>
</el-form>
  • <el-button>: Schaltfläche
  • <el-button> -> Typ: Schaltflächentyp
  • <el-button> -> @click: Das Ereignis, das ausgelöst wird, wenn auf die Schaltfläche geklickt wird. Beachten Sie, dass der Eingabeparameter der Methode „rulesForm“ ist, der mit dem rel-Attributwert des Formulars <el-form> übereinstimmen muss.

2. Methoden

Methoden: {
    // Speichern onSubmit(formName) {
        dies.$refs[formName].validate(valid => {
            if (gültig) {
                console.log("Senden erfolgreich!!");
            }anders{
                console.log("Fehler beim Senden!!");
            }
        });
    },
    // Abbrechen cancel() {
        
    }
}

this.$refs[formName].validate: formName ist das übergebene „rulesForm“, das mit dem rel-Attributwert des <el-form>-Formulars übereinstimmt, sodass das zu validierende Formular angegeben wird

Der vollständige Beispielcode lautet wie folgt

1. Regeln.vue

<Vorlage>
  <div Klasse="App-Container">
    <el-tabs v-model="aktiverName">
      <el-tab-pane label="Formular" name="rulesPane" @tab-click="handleClick">
        <!-- Formular -->
        <el-form ref="RegelnForm" :Regeln="FormRegeln" :model="RegelnForm" label-width="200px">
          <el-form-item label="Benutzername:" prop="Benutzername">
            <el-input v-model="rulesForm.Benutzername" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item label="Bankname:" prop="accountName" :rules="[{required:true,message:'Bitte geben Sie den Banknamen ein',trigger:'blur'}]">
            <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item label="Bankkartennummer:" prop="Kontonummer">
            <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="50"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('rulesForm')">Speichern</el-button>
            <el-button @click="cancel">Abbrechen</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</Vorlage>
 
<Skript>
importiere { validateAccountNumber } aus "@/utils/validate";
 
// Bestimmen Sie, ob das Bankkartenkonto korrekt ist const validatorAccountNumber = (rule, value, callback) => {
  wenn (!Wert) {
    return callback(new Error("Bitte geben Sie Ihre Kontoinformationen ein"));
  } anders {
    wenn (validateAccountNumber(Wert)) {
      Rückruf();
    } anders {
      return callback(new Error('Falsches Kontoformat'))
    }
  }
};
 
Standard exportieren {
  Name: "Regeln",
  Daten() {
    zurückkehren {
      ActiveName: "Regelbereich",
      Standardeigenschaften: {
        Kinder: "Kinder",
        Bezeichnung: "Bezeichnung"
      },
      RegelnForm: {
      },
      // Formularvalidierung formRules: {
        Benutzername: [
          {
            erforderlich: wahr,
            Meldung: "Bitte geben Sie Ihren Benutzernamen ein",
            Auslöser: „Unschärfe“
          }
        ],
        Kontonummer: [
          {
            erforderlich: wahr,
            validator: validatorAccountNumber,
            Auslöser: „Unschärfe“
          }
        ],
      }
    };
  },
  erstellt() {},
  montiert() {},
  Methoden: {
    handleClick(tab) {
      
    },
    // Abbrechen cancel() {
      
    },
    // Speichern onSubmit(formName) {
      dies.$refs[formName].validate(valid => {
        if (gültig) {
          console.log("Senden erfolgreich!!");
        } anders {
          console.log("Fehler beim Senden!!");
          gibt false zurück;
        }
      });
    }
  }
};
</Skript>
 
<style lang="scss">
</Stil>

2. validieren.js

/* Bankkonto */
Exportfunktion validateAccountNumber(str) {
  const reg = /^([1-9]{1})(\d{14}|\d{18})$/
  return reg.test(str)
}

Rendern

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Der Produktionsprozess des Vue-Formularvalidierungs-Plugins
  • Detaillierte Erklärung zur Verwendung von Vue Validator, einem Vue-Formularvalidierungs-Plugin
  • Vue verwendet Regeln zum Überprüfen von Formularfeldern
  • Beispiel für Prüfregeln für benutzerdefinierte Vue-Formularinhalte
  • Detaillierte Erklärung, wie Vue Regeln zur Validierung von Formularfeldern verwendet
  • Wissen Sie wirklich, wie man eine Vue-Formularvalidierung durchführt? Vue-Formularvalidierung (Formular) validieren
  • Bei der Formularvalidierung von Vue ElementUI sind Probleme aufgetreten
  • Vue+elementUI implementiert ein Beispiel für eine Formular- und Bild-Upload- und Überprüfungsfunktion
  • Validierungsmethode für Formularelemente in einer V-For-Schleife bei Verwendung der Elementkomponente in Vue
  • Implementierung der Vue Elementui-Formularvalidierung

<<:  So verwenden Sie IDEA zum Konfigurieren von Tomcat und Erstellen von JSP-Dateien

>>:  Analyse der Prinzipien und Verwendung von Linux-Hardlinks und Softlinks

Artikel empfehlen

So gehen Sie mit Zeitzonenproblemen in Docker um

Hintergrund Als ich in diesen beiden Tagen Docker...

Verwendung des HTML-H-Titel-Tags

Die Verwendung von H-Tags, insbesondere h1, war sc...

Vue realisiert die Bildschirmanpassung von Großbildschirmseiten

In diesem Artikel wird der spezifische Code von V...

Detaillierte Erklärung des unbekannten Fehlers 10061 bei der Verwendung von Navicat zur Verbindung mit einer Remote-Linux-MySQL-Datenbank

Bei der Verwendung von Navicat zum Herstellen ein...

Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 2) (Teil 37)

Datensicherung und -wiederherstellung Teil 3, Det...

So leiten Sie eine URL mit Nginx Rewrite um

Ich muss in letzter Zeit bei der Arbeit oft die N...

MySQL Advanced Learning Notes (Teil 3): Einführung in die logische Architektur von MySQL, detaillierte Erläuterung der MySQL-Speicher-Engine

Einführung in die logische MySQL-Architektur Über...

Verwenden Sie momentJs, um eine Countdown-Komponente zu erstellen (Beispielcode)

Heute möchte ich einen Countdown von Vue und Mome...

Lösung für das MySQL-Fehlerproblem 1045 (28000)

Ich bin auf den MySQL-FEHLER 1045 gestoßen und ha...

So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage

Inhaltsverzeichnis Vorwort 1. Ereignisse und Zwis...

Detaillierte Erklärung der Verwendung des Linux-Befehls nslookup

[Wer ist nslookup?] 】 Der Befehl nslookup ist ein...

So erhalten Sie die aktuelle Zeit mit der Funktion time(NULL) und localtime() in Linux

Zeit(); Funktion Funktionsprototyp: time_t time(t...

MySQL 8.0.12 Einfaches Installations-Tutorial

In diesem Artikel finden Sie das Installations-Tu...

Verwenden einer MySQL-Datenbank im Docker, um LAN-Zugriff zu erhalten

1. Holen Sie sich das MySQL-Image Docker-Pull MyS...

Implementierung des Vue-Top-Tags-Browserverlaufs

Inhaltsverzeichnis Unsinn Implementierte Funktion...