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

Die IE-Umgebung schreibt vor, dass die Div-Höhe größer sein muss als die Schrifthöhe

Code kopieren Der Code lautet wie folgt: <div ...

Gutes Website-Copywriting und gute Benutzererfahrung

Das Betrachten einer Website ist eigentlich wie di...

So fügen Sie Div-Elementen abgerundete Ränder hinzu

Wie unten dargestellt: CSS- CodeInhalt in die Zwi...

Webdesign-Tutorial (3): Designschritte und Denkweise

<br />Vorheriges Tutorial: Webdesign-Tutoria...

So konfigurieren Sie Nginx, um die Zugriffshäufigkeit derselben IP zu begrenzen

1. Fügen Sie den folgenden Code zu http{} in ngin...

Das WeChat-Applet implementiert einen einfachen Rechner

Ein einfacher Rechner, der als Referenz in das We...

Negative Distanz (Empathie) – iterativer Prozess der gegenseitigen Beeinflussung

Negative Distanz bezieht sich auf Empathie. Vorwo...

SpringBoot integriert Activiti7-Implementierungscode

Nach der offiziellen Veröffentlichung von Activit...

Probleme und Lösungen bei der Verwendung des V-Modells zum bidirektionalen Binden der Werte von übergeordneten und untergeordneten Komponenten in Vue

Inhaltsverzeichnis Szenario Versuchen Sie zu löse...

Kopieren Sie den Inhalt einer Datei an das Ende einer anderen Datei in Linux

Problembeschreibung: Der Inhalt der Datei 11 laut...

Tutorial zur Installation von MySQL 5.7.18 auf Mac OS 10.12

Ich habe das ganze Internet durchsucht und bin au...

Fähigkeiten zur Seiten-Refaktorierung – Javascript, CSS

Über JS, CSS CSS: Stylesheet oben Vermeiden Sie C...

Detaillierte Erklärung zur Einstellung des Hintergrundbild-Attributs in HTML

Bei Bildern denken wir zuerst an das Hintergrundb...

Detaillierte Erklärung des Ref-Attributs von Vue

Zusammenfassen Dieser Artikel endet hier. Ich hof...

Zusammenfassung der Erfahrungen beim Website-Erstellen

<br />Welche Grundsätze sollten beachtet wer...