Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML5

Validieren von Formulareingaben nur mit HTML5 und Regex

Read Time: 7 mins

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Die Validierung von Formulareingaben ist etwas, das ernst genommen werden sollte. Mit etwas Glück wird nichts Schlimmeres als Garbage Data an eine Website übermittelt, die Daten aus Formularen ohne ordnungsgemäße Validierung verwendet. Es besteht jedoch auch die Möglichkeit, dass Hacker in der Lage sein werden, die privaten Daten von Benutzern, die Ihnen mit ihren Informationen vertraut haben, zu kompromittieren.

Da die Validierung so wichtig ist, ist es nachvollziehbar, dass es Tools und Bibliotheken gibt, um Daten sowohl auf dem Front-End als auch im Back-End zu validieren und zu bereinigen.

In diesem Tutorial konzentrieren wir uns auf die Verwendung der integrierten Funktionen von HTML5, um verschiedene Arten von Eingaben zu validieren, ohne sich auf externe Bibliotheken zu verlassen. Natürlich sollten Sie es nicht nur bei der HTML5-basierten Validierung belassen, aber dies wäre ein guter Anfang, um Formulare auf der Website sicherer zu machen.

Das Formulareingabeelement

Wenn Sie Eingaben von Ihren Benutzern erhalten möchten, werden Sie höchstwahrscheinlich das HTML-input-Element verwenden. Es spielt keine Rolle, ob Sie ihren Vornamen, Nachnamen, E-Mail-Adresse, die Stadt, in der sie derzeit leben, ihre Telefonnummer oder ihr Lieblingssportteam kennen möchten. Das input-Element ist eine sehr benutzerfreundliche Art, Informationen von unseren Besuchern zu erhalten.

Einige böswillige Benutzer möchten jedoch die Tatsache nutzen, dass sie fast jede Art von Zeichenfolge in ein Eingabeelement eingeben und ein Formular senden können. In ähnlicher Weise kann es einige Benutzer geben, die einfach nicht wussten, dass sie die Daten im falschen Format eingeben.

Beide Probleme können sehr einfach gelöst werden, indem Sie einige HTML5-Attribute mit Ihren Formularelementen verwenden.

Das Type-Attribut

Das type-Attribut bestimmt, welche Art von Eingabe für ein bestimmtes Element als gültig betrachtet wird. Wenn für das type-Attribut kein Wert angegeben ist, wird der Typ standardmäßig auf Text festgelegt. Dies bedeutet im Grunde, dass alle Arten von Texteingaben für dieses bestimmte Element als gültig angesehen werden. Dies ist in Ordnung, wenn Benutzer ihre Namen eingeben sollen. Wenn Sie jedoch möchten, dass sie ihre E-Mail-Adresse oder Zahlen wie Alter und Gewicht eingeben, ist es viel besser, den Wert des type-Attributs auf etwas Geeignetes festzulegen.

Hier sind ein paar Werte, aus denen Sie wählen können:

  • email: Dadurch werden Benutzer aufgefordert, ihre E-Mail-Adresse in einem gültigen Format einzugeben. Zum Beispiel können sie nicht einfach myemail.com oder something@ oder something.com schreiben. Sie müssen einen Wert eingeben, der myemail@domain.tld ähnelt. Natürlich können sie immer noch nicht existente E-Mails eingeben, aber das ist ein anderes Problem!
  • number: Dadurch wird sichergestellt, dass nur Zahlen als gültige Eingabe betrachtet werden. Wenn Sie beispielsweise jemanden in einem Formular nach seinem Alter fragen, kann er keine Kartoffel oder sechsunddreißig als Eingabe einreichen. Sie müssen eine tatsächliche Zahl wie 36 oder 15 schreiben.
  • url: Sie können das type-Attribut auf url festlegen, wenn Benutzer eine gültige URL in das Eingabeelement eingeben sollen. Dies wird sie daran hindern, so etwas wie tutsplus einzugeben. tutsplus.com wird jedoch auch als ungültig betrachtet – Benutzer müssen eine vollständige URL wie https://tutsplus.com eingeben.
  • tel: Die Verwendung dieses Wertes ist nicht so hilfreich wie andere, da das Format für eine Telefonnummer auf der ganzen Welt variiert. Es gibt einfach kein Standardmuster, das Browser mit der Eingabe abgleichen können, um festzustellen, ob die Zahl gültig ist. Das Festlegen des Typs auf tel kann jedoch zu einem späteren Zeitpunkt hilfreich sein, wenn Sie eine eigene benutzerdefinierte Validierung ausführen.

Es gibt viele andere Werte für das type-Attribut, die verwendet werden können, um den Eingabetyp anzugeben, der für ein bestimmtes Element gültig ist. Sie können alle diese Werte auf der Referenzseite Eingabeelement auf MDN lesen.

Die folgende CodePen-Demo zeigt, wie wir das type-Attribut verwenden können, um zu steuern, was in verschiedenen Eingabefeldern zulässig ist.

Die Attribute für minimale und maximale Länge

Eine weitere Möglichkeit, einzuschränken, was als gültige Eingabe für ein Element gilt, besteht darin, die Attribute minlength und maxlength zu verwenden. Diese legen die minimale und maximale Anzahl von Zeichen fest, die in ein Eingabeelement eingegeben werden müssen, damit es gültig ist.

Die richtigen Werte für beide Attribute variieren von Fall zu Fall. Einige Websites möchten beispielsweise, dass ein Benutzername zwischen 4 und 15 Zeichen lang ist, während andere die maximale Länge auf 12 Zeichen begrenzen. In ähnlicher Weise werden die Menschen in einigen Ländern ungewöhnlich kurze oder lange Namen im Vergleich zu anderen haben.

Verwenden von Regex für die Formularvalidierung

Das Festlegen eines type-Attributwerts hilft uns sicherlich dabei, das zu begrenzen, was als gültige Eingabe übergeht. Sie können jedoch noch weiter gehen und ein Muster angeben, dem ein Benutzername oder eine E-Mail-Adresse folgen muss, um als gültig angesehen zu werden.

Angenommen, Sie möchten sicherstellen, dass Benutzernamen nur alphanumerisch sind, dies kann einfach mit Hilfe des pattern-Attributs erfolgen. Sie müssen nur ihren Wert auf einen Regex-Ausdruck setzen, der als Richtlinie dient, um zu bestimmen, welche Eingabe gültig ist und welche nicht.

Im Folgenden finden Sie einige Beispiele für die Verwendung von regex mit dem pattern-Attribut.

Das obige Muster überprüft weiterhin, ob alle Benutzernamen nur Zeichen von a-z, A-Z oder 0-9 enthalten. Beispielsweise sind monty42, 42monty, MON42ty und mon42ty in diesem Fall alle gültigen Benutzernamen, während monty_42 ungültig ist.

Die Attribute minlength und maxlength stellen sicher, dass der Benutzername nicht zu kurz oder zu lang ist.

Wenn Sie möchten, dass die Benutzernamen mit einem bestimmten Zeichen wie einem Unterstrich beginnen, können Sie ihn einfach an der Vorderseite des Musters hinzufügen.

Nun wird jeder Benutzername, der nicht mit _ beginnt und keine Zeichen neben a-z, A-Z oder 0-9 enthält, danach als ungültig betrachtet.

Ich hoffe, dass dies bei der Klärung hilft, wie wir das Pattern-Attribut und einige Regex verwenden können, um die als gültige Eingabe betrachteten Eingaben einzuschränken, selbst wenn das type-Attribut auf text festgelegt ist.

Erweiterte Validierung mit Regex-Mustern

Sie können das pattern-Attribut auch zusammen mit anderen Arten von Eingabeelementen wie email und url verwenden, um das einzuschränken, was als gültig gilt. Angenommen, Sie möchten nur, dass Benutzer eine URL eingeben, die eine Unterdomäne von tutsplus.com ist. Sie können einfach den Wert des pattern-Attributs auf https://.*\.tutsplus.com festlegen. Nun werden alle Eingaben wie https://google.com oder https://envato.com als ungültig betrachtet. Selbst https://code.tutsplus.com ungültig, da die gültige URL mit https://. beginnen soll.

Das gleiche kann mit E-Mails getan werden, wenn Sie wollen, dass die E-Mails mit etwas Bestimmtem enden, können Sie einfach das Musterattribut dafür verwenden. Hier ist ein Beispiel:

Wenn das obige Eingabeelement in einem Formular verwendet wurde, können Benutzer nur die E-Mail-Adresse eingeben, die auf tutsplus.com oder envato.com endet. Dies bedeutet, dass hi@gmail.com oder howdy@something.com ungültig wären.

Weitere Beispiele für reguläre Ausdrücke und Tipps zur Verwendung finden Sie in unserem JavaScript Regex Cheatsheet.

Erforderliche Felder und Platzhaltertext

Obwohl die required- und placeholder-Attribute nicht unbedingt mit der Validierung zusammenhängen, können sie verwendet werden, um die Benutzerfreundlichkeit zu verbessern, wenn jemand ein Formular ausfüllt.

Nicht jeder ist bereit, seine Informationen mit einer Website zu teilen. Wenn ein Formular zehn verschiedene Eingabeelemente enthält, aber nur 5 oder 6 von ihnen für das benötigt werden, was Sie tun möchten, und der Rest zusätzliche Informationen erhalten soll, ist es eine gute Idee, die Benutzer darüber zu informieren.

Sie können bestimmte Eingabefelder nach Bedarf mit dem required-Attribut markieren, während Sie die optionalen Felder unverändert lassen. Dadurch werden die Benutzer über die absoluten Mindestinformationen informiert, die sie beim Ausfüllen eines Formulars angeben müssen. Es könnte auch die Anzahl der Personen erhöhen, die ein Formular ausfüllen, weil sie vorher wissen, dass das Ausfüllen aller Felder nicht unbedingt notwendig ist.

Das placeholder-Attribut ist auch von großer Bedeutung, wenn es darum geht, ein Formular benutzerfreundlicher zu gestalten. Wenn Sie beispielsweise Benutzer nicht darüber informieren, dass sie URLs eingeben müssen, die mit https:// beginnen und Subdomains von tutsplus.com sind, geben sie möglicherweise einfach auf, nachdem sie das URL-Feld erfolglos mit something.com oder code.tutsplus.com gefüllt haben.

Im folgenden Beispiel haben wir die Attribute pattern, required und placeholder für eine detailliertere Kontrolle der Validierung und eine bessere Benutzererfahrung verwendet.

Letzte Gedanken

In diesem Tutorial haben wir gelernt, wie sie einfach HTML und Regex verwenden, wie Sie unseren Formularen grundlegende Validierung hinzufügen. Wenn Sie den richtigen Wert für das type-Attribut verwenden, werden Benutzer dazu gezwungen, Informationen in einem Eingabefeld in einem bestimmten Format einzugeben. Die Verwendung regulärer Ausdrücke mit dem pattern-Attribut kann uns helfen, die gültige Eingabe weiter einzuschränken.

Schließlich haben wir gelernt, wie man das placeholder-Attribut verwendet, um sicherzustellen, dass die von uns erstellten Formulare benutzerfreundlich sind und dass die Benutzer, die Informationen ausfüllen, nicht frustriert werden, weil sie das Eingabeformat nicht kennen, das wir für gültig halten.

Die Formularvalidierung endet hier sicherlich nicht. In unserem nächsten Tutorial erfahren Sie mehr über verschiedene Formularereignisse in jQuery und wie Sie Formulare mit einem jQuery-Plugin validieren.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.