So implementieren Sie die Formularvalidierung in Vue

1. Installation und Nutzung

Installieren Sie es zunächst in Ihrem Vue-Projekt:

npm installieren --save vue-input-check

Nach Abschluss der Installation importieren und registrieren Sie:

importiere InputCheck aus „vue-input-check“;

// Installieren Sie Vue.use(inputCheck);

Dann können wir es in folgender Form verwenden:

<form autocomplete="off" novalidate>
    <input v-model='key' name='Name des Eingabefelds' v-input-check='[key,"validate-express"]'/>
    <!-- Sie können so viele Eingabefelder haben, wie Sie möchten-->
</form>

Wie Sie sehen, definieren wir im obigen v-input-check die Regeln für jedes Eingabefeld. Der Wert ist ein Array. Der erste Wert ist v-model des Eingabefelds und der zweite Wert ist ein String . Die Syntax lautet wie folgt:

validieren-express="Wert1:Param1:Param2|Wert2|Wert3:Param1"

Verschiedene Regeln werden durch | getrennt, und die Parameter der Regeln, die Parameter übergeben müssen, werden durch : getrennt. Schauen wir uns einige Beispiele an:

    v-input-check='[Schlüssel,"erforderlich|maxLength:10|regulärer Ausdruck:^\\d{1,5}$"]'
    v-input-check='[Schlüssel,"erforderlich"]'

Die folgenden integrierten Regeln sind derzeit verfügbar:

required:boolean: Gibt an, dass der Wert eingegeben werden muss. Es gibt einen optionalen Parameter, der angibt, ob der Wert eingegeben werden muss. Der Standardwert ist true
maxLength:num: maximale Länge
minLength:num: Mindestlänge
regexp:str: regulärer Ausdruck

2. Erhalt der Verifizierungsergebnisse

Nachdem die Seitenregeln definiert sind, können Sie die Überprüfungsergebnisse auf zwei Arten abrufen.

1.JS-Methode

Um die Prüfung zu starten, gehen Sie einfach wie folgt vor:

dies.$validateCheck(formnode, callback, errorback);

Dieses Objekt enthält drei Parameter:

• formnode : der Formularknoten, der überprüft werden muss, erforderlich
• callback : Rückruf zur Formulargültigkeit, optional
• errorback : Formular für ungültigen Rückruf, optional
  

Darüber hinaus verfügt der Fehler-Callback über einen Parameter mit dem Datenformat:

{
    "$el": der falsche Eingabefeldknoten "$error": die erste Fehlermeldung des aktuellen Eingabefelds}

2. HTML-Methode

Der Zweck dieser Methode besteht darin, Echtzeit-Feedback zum Eingabestatus des aktuellen Formulars auf der Seite zu geben.

Zunächst können Sie auf dem Formular ermitteln, ob das Formular gültig ist, indem Sie beurteilen, ob class v-valid oder v-invalid enthält.

Ebenso können Sie dort, wo die Direktive v-input-check hinzugefügt wird, feststellen, ob die Stelle zulässig ist. Für spezifischere Fehlerdetails, wie z. B. eine ungültige Pflichteingabe, lautet die Klasse wie v-invalid-required v-invalid .

3. Benutzerdefinierte Validierungsregeln

In den meisten Fällen müssen wir möglicherweise auch neue Validierungsregeln hinzufügen, da die Standardregeln oft nicht ausreichen, um allen Geschäftssituationen gerecht zu werden:

Vue.use(inputCheck, {

    // Benutzerdefinierte Validierungsregeln validate: [{

        //Regelname: "XXX",

        // Überprüfungsmethode, gibt „true“ für legal und „false“ für illegal zurück // Beachten Sie, dass mit Ausnahme von el und val die restlichen Parameter dieser Funktion bei Verwendung mit „:“ übergeben werden und es eine beliebige Anzahl davon geben kann // Zum Beispiel: „erforderlich:true|Telefon:Parm1:Param2“
        Test: Funktion (el, val, ...) {
            gibt true|false zurück;
        },

        // Unzulässige Eingabeaufforderungsinformationen. Es sollte eine String-Meldung zurückgegeben werden: function (el, name) {
            gib "XXX" zurück;
        }
    },
    // Es kann mehrere Validierungsregeln geben …
    ]

});

Dies ist das Ende dieses Artikels zur Implementierung der Formularvalidierung in Vue. Weitere relevante Inhalte zur Implementierung der Formularvalidierung in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!