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

Javascript-Grundlagen: Detaillierte Erklärung der Operatoren und der Flusskontrolle

Inhaltsverzeichnis 1. Betreiber 1.1 Arithmetische...

Analysieren Sie die Methode zur Überwachung von Nginx durch Prometheus + Grafana

Inhaltsverzeichnis 1. Herunterladen 2. Installier...

JavaScript-Grundlagenoperatoren

Inhaltsverzeichnis 1. Betreiber Zusammenfassen 1....

So konfigurieren Sie inländische Quellen in CentOS8 yum/dnf

CentOS 8 hat das Installationsprogramm für Softwa...

js canvas realisiert Bilder mit abgerundeten Ecken

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

So verwenden Sie die Vue-Cache-Funktion

Inhaltsverzeichnis Cache-Funktion in vue2 Transfo...

Detaillierte Erläuterung der Installations- und Bereitstellungspraktiken von Zabbix

Vorwort Zabbix ist eine der gängigsten Open-Sourc...

Der Unterschied und die Verwendung von Datum/Uhrzeit und Zeitstempel in MySQL

1. Wie wird die aktuelle Uhrzeit in MySQL dargest...

Verwendung und Beispiele für Linux-Befehle zur Echotextverarbeitung

Die Beschreibung von echo im Linux-Hilfedokument ...

ThingJS-Partikeleffekte, um Regen- und Schneeeffekte mit einem Klick zu erzielen

Inhaltsverzeichnis 1. Partikeleffekte 2. Laden Si...

Detaillierte Erklärung der Funktion und Verwendung der KeepAlive-Komponente in Vue

Vorwort Während des Vorstellungsgesprächs erwähne...

JavaScript implementiert die Eingabeüberprüfung im Kennwortfeld

Manchmal ist es notwendig, bei Benutzereingaben e...

Implementierung der Nginx-Konfiguration und des Zugriffs auf lokale statische Ressourcen in der Mac-Umgebung

Manchmal erfordert die lokale Entwicklung das Deb...

js implementiert Array-Abflachung

Inhaltsverzeichnis So reduzieren Sie ein Array 1....

So verwenden Sie xshell zum Herstellen einer Verbindung zu Linux in VMware (2 Methoden)

【Vorwort】 Ich möchte vor Kurzem das Prüfungssyste...