Testen Sie Ihre Fähigkeiten: Formularvalidierung

In dieser Aufgabe stellen wir Ihnen ein einfaches Support-Anfrageformular zur Verfügung und möchten, dass Sie einige Validierungsfunktionen hinzufügen:

1. Machen Sie alle Eingabefelder obligatorisch, bevor das Formular abgesendet werden kann.
2. Ändern Sie den Typ der Felder "Email address" und "Phone number", damit der Browser eine spezifischere Validierung für die angeforderten Daten durchführt.
3. Geben Sie dem Feld "User name" eine erforderliche Länge von 5 bis 20 Zeichen, dem Feld "Phone number" eine maximale Länge von 15 Zeichen und dem Feld "Comment" eine maximale Länge von 200 Zeichen.

Versuchen Sie, Ihr Formular abzusenden — es sollte die Absendung verweigern, bis die obigen Bedingungen erfüllt sind, und geeignete Fehlermeldungen anzeigen. Um Ihnen zu helfen, möchten Sie vielleicht ein einfaches CSS hinzufügen, um anzuzeigen, wann ein Formularfeld gültig oder ungültig ist.

Nun möchten wir, dass Sie das gleiche Formular, das Sie in der vorherigen Aufgabe gesehen haben (verwenden Sie Ihre vorherige Antwort, wenn Sie möchten), um einige spezifischere Muster-Validierungen auf die ersten drei Felder mit regulären Ausdrücken erweitern:

1. Alle Benutzernamen in unserer Anwendung bestehen aus einem einzelnen Buchstaben, gefolgt von einem Punkt, gefolgt von drei oder mehr Buchstaben oder Zahlen. Alle Buchstaben sollten klein geschrieben sein.
2. Alle Email-Adressen unserer Benutzer bestehen aus einem oder mehreren Buchstaben (groß oder klein) oder Zahlen, gefolgt von "@bigcorp.eu".
3. Entfernen Sie die Längenvalidierung aus dem Telefonnummernfeld, falls vorhanden, und setzen Sie es so, dass es 10 Ziffern akzeptiert — entweder 10 Ziffern in Folge oder ein Muster von drei Ziffern, drei Ziffern und vier Ziffern, getrennt durch Leerzeichen, Bindestriche oder Punkte.

Auch hier möchten Sie möglicherweise ein einfaches CSS hinzufügen, um anzuzeigen, wann ein Formularfeld gültig oder ungültig ist.

In unserer letzten Aufgabe für dieses Set stellen wir Ihnen ein ähnliches Beispiel wie im begleitenden Artikel vor — ein Eingabefeld für eine Email-Adresse. Wir möchten, dass Sie die Constraint-Validierungs-API sowie einige Formularvalidierungsattribute verwenden, um benutzerdefinierte Fehlermeldungen zu programmieren.

1. Machen Sie die Eingabe obligatorisch und geben Sie eine Mindestlänge von 10 Zeichen an.
2. Fügen Sie einen Event-Listener hinzu, der überprüft, ob der eingegebene Wert eine Email-Adresse ist und ob er lang genug ist. Wenn er nicht wie eine Email-Adresse aussieht oder zu kurz ist, geben Sie dem Benutzer geeignete benutzerdefinierte Fehlermeldungen.