Benutzerdefinierte Formularevalidierung mit Vue.js

Einführung

In diesem Projekt lernst du, wie du einen benutzerdefinierten Formularvalidierer mit Vue.js implementierst. Der benutzerdefinierte Formularvalidierer ermöglicht es dir, die Formulareingaben zu validieren und die Gültigkeit der Daten zu überprüfen, bevor der Benutzer das Formular abgibt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die FormInput-Komponente implementierst, um den v-model-Wert der Komponente zu aktualisieren, wenn der Wert des Eingabefelds sich ändert.
• Wie du die is_email-Funktion implementierst, um die E-Mail-Adresse gemäß bestimmten Regeln zu validieren.
• Wie du die validateForm-Funktion implementierst, um die Formulardaten gemäß den definierten Validierungsregeln zu validieren.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Einen benutzerdefinierten Formularvalidierer in Vue.js zu erstellen.
• Formulareingaben mit benutzerdefinierten Validierungsregeln zu validieren.
• Formularvalidierungsfehler zu behandeln und sie dem Benutzer anzuzeigen.

Projektstruktur einrichten

In diesem Schritt wirst du die Projektdateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne das Projektverzeichnis. Die Verzeichnisstruktur ist wie folgt:

├── components
│   ├── FormInput.js
│   └── FormValidator.js
├── css
├── index.html
├── js
│   └── util.js
└── lib
    └── vue.global.js

Dabei gilt:

• index.html ist die Hauptseite.
• css ist der Ordner zum Speichern der Projektstile.
• lib ist der Ordner zum Speichern der Projektabhängigkeiten.
• components/FormInput.js ist die input-Komponente.
• components/FormValidator.js ist die Formularvalidierungs-Komponente.
• js/util.js sind die Hilfsfunktionen, die das Projekt benötigt.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben im VM und aktualisiere es manuell, um die Seite zu sehen.

Implementiere die FormInput-Komponente

In diesem Schritt wirst du lernen, wie du die FormInput-Komponente implementierst, um den v-model-Wert der Komponente in index.html zu aktualisieren, wenn der Wert des Eingabefelds sich ändert.

1. Öffne die Datei FormInput.js im Verzeichnis components.

2. In der setup-Funktion der FormInput-Komponente finde den Abschnitt TODO für Ziel 1.

3. Implementiere den Code, um ein Ereignis auszulösen, um den v-model-Wert der Komponente zu aktualisieren, wenn der Wert des Eingabefelds (mit der Klasse form-input) sich ändert.

   watch(inputValue, (newValue) => {
     emit("update:modelValue", newValue);
   });
   

   Dieser Code verwendet die watch-Funktion, um Änderungen an der reaktiven Variable inputValue zu beobachten. Wenn der Wert sich ändert, löst er ein Ereignis mit dem neuen Wert aus, um die v-model-Bindung in der übergeordneten Komponente zu aktualisieren.

4. Speichere die Änderungen an der Datei FormInput.js.

Implementiere die is_email-Funktion

In diesem Schritt wirst du lernen, wie du die is_email-Funktion in der Datei util.js implementierst, um die E-Mail-Adresse zu validieren.

1. Öffne die Datei util.js im Verzeichnis js.

2. In der is_email-Funktion finde den Abschnitt TODO für Ziel 2.

3. Implementiere die Logik, um die E-Mail-Adresse gemäß den angegebenen Anforderungen zu validieren:

   • Die E-Mail-Adresse muss zwischen 6 und 20 Zeichen lang sein.
   • Die E-Mail-Adresse muss aus einem Benutzernamenanteil und einem Domänenanteil bestehen, getrennt durch das @-Symbol.
   • Der Benutzernamenanteil muss mindestens 1 Zeichen lang sein und kann Ziffern oder Buchstaben enthalten.
   • Der Domänenanteil muss in der Mitte ein . enthalten, und der Teil vor dem . muss mindestens 1 Zeichen lang sein, während der Teil nach dem . 2 bis 4 Buchstaben lang sein muss.

   Hier ist eine Beispielimplementierung:

   const is_email = (val) => {
     const emailRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
     return emailRegex.test(val);
   };
   

4. Speichere die Änderungen an der Datei util.js.

Implementiere die validateForm-Funktion

In diesem Schritt wirst du lernen, wie du die validateForm-Funktion in der Datei FormValidator.js implementierst, um die Formulardaten zu validieren.

1. Öffne die Datei FormValidator.js im Verzeichnis components.

2. In der validateForm-Funktion finde den Abschnitt TODO für Ziel 3.

3. Implementiere die Logik, um die Formulardaten gemäß dem bereitgestellten formRules-Objekt zu validieren. Die Validierung sollte folgenden Regeln entsprechen:

   1. Wenn das nickname-Feld leer ist, füge eine Fehlermeldung zum errors-Objekt hinzu mit dem Schlüssel "nickname".
   2. Für das email-Feld:
   • Wenn das Feld leer ist, füge eine Fehlermeldung zum errors-Objekt hinzu mit dem Schlüssel "email".
   • Wenn die E-Mail-Adresse nicht den Regeln entspricht oder nicht im richtigen Längenbereich liegt, füge eine Fehlermeldung zum errors-Objekt hinzu mit dem Schlüssel "email".

   Hier ist eine Beispielimplementierung:

   const validateForm = () => {
     return new Promise((resolve, reject) => {
       errors.value = {}; // Lösche die vorherige Fehlermeldung
   
       // Validiere Nickname
       try {
         props.rules.nickname.map((item) => {
           item?.validator(null, props.formData.nickname, (err) => {
             if (err) {
               throw "nickname|" + err.message;
             }
           });
         });
       } catch (e) {
         const parseErr = e.split("|"),
           errKey = parseErr[0],
           errValue = parseErr[1];
         errors.value[errKey] = errValue;
       }
   
       // Validiere E-Mail
       try {
         props.rules.email.map((item) => {
           if (item?.required) {
             if (props.formData.email == "") throw "email|" + item.message;
           }
           if (item?.type) {
             if (!validateByType(item.type, props.formData.email))
               throw "email|" + item.message;
             if (props.formData.email.length < 6) throw "email|" + item.message;
             if (props.formData.email.length > 20)
               throw "email|" + item.message;
           }
         });
       } catch (e) {
         const parseErr = e.split("|"),
           errKey = parseErr[0],
           errValue = parseErr[1];
         errors.value[errKey] = errValue;
       }
   
       if (hasErrors.value) {
         resolve(false); // Fehler vorhanden, Validierung fehlgeschlagen
       } else {
         resolve(true);
       }
   
       emit("valid", errors.value);
     });
   };
   

4. Speichere die Änderungen an der Datei FormValidator.js.

Herzlichen Glückwunsch! Du hast jetzt die Implementierung des benutzerdefinierten Formularvalidierers abgeschlossen. Du kannst jetzt die Anwendung testen, indem du das Projekt ausführst und mit dem Formular interagierst. Die fertige Wirkung ist wie folgt:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.