Einführung in die HTML5-Einschränkungsprüfung

Interaktive Websites und Anwendungen sind ohne Formulare, die es uns ermöglichen, nicht vorstellbar Verbinden Sie sich mit unseren Benutzern, und zu erhalte die Daten Wir brauchen, um reibungslose Transaktionen mit ihnen sicherzustellen. Wir brauchen gültige Benutzereingabe, Wir müssen es jedoch so erwerben frustriert nicht unsere Benutzer zu viel.

Während wir die Verwendbarkeit unserer Formulare mit intelligent ausgewählten UX-Entwurfsmustern verbessern können, verfügt HTML5 über einen systemeigenen Mechanismus für die Überprüfung der Nebenbedingungen, der es uns erlaubt Eingabefehler direkt im Frontend abfangen.

In diesem Beitrag konzentrieren wir uns auf Vom Browser bereitgestellte Einschränkungsprüfung, und schauen Sie sich an, wie Frontend-Entwickler dies können Sichere gültige Benutzereingaben mithilfe von HTML5.

Warum wir eine Front-End-Eingabevalidierung benötigen

Eingabeüberprüfung hat zwei Hauptziele. Der Inhalt, den wir erhalten, muss sein:

1. Nützlich

Wir brauchen nutzbare Daten, mit denen wir arbeiten können. Wir müssen Menschen dazu bringen, einzutreten realistische Daten im richtigen Format. Zum Beispiel wurde niemand, der heute lebt, vor 200 Jahren geboren. Das Erhalten solcher Daten mag auf den ersten Blick komisch erscheinen, aber auf lange Sicht ist es ärgerlich und füllt unsere Datenbank mit nutzlosen Daten.

2. Sichern

In Bezug auf Sicherheit bedeutet dies, dass wir dies tun müssen verhindern die Injektion von schädlichen Inhalten - ob absichtlich oder zufällig.

Nützlichkeit (vernünftige Daten erhalten) kann erreicht werden nur auf der clientseite, Das Backend-Team kann dabei nicht viel helfen. Erzielen Sicherheit, Front- und Backend-Entwickler müssen zusammenarbeiten.

Wenn Frontend-Entwickler Eingaben auf der Clientseite ordnungsgemäß überprüfen, können Sie die Das Backend-Team muss sich mit weniger Schwachstellen auseinandersetzen. Hacken (eine Seite) hat oft zur Folge Übermittlung zusätzlicher Daten, oder Daten im falschen Format. Entwickler können Sicherheitslücken wie diese bekämpfen und erfolgreich vom Frontend aus kämpfen.

In diesem PHP-Sicherheitshandbuch wird beispielsweise empfohlen, auf Client-Seite alles zu prüfen, was wir können. Sie betonen die Wichtigkeit der Frontend-Eingabevalidierung, indem sie viele Beispiele geben, wie zum Beispiel:

"Die Eingabeüberprüfung funktioniert am besten mit extrem eingeschränkten Werten, beispielsweise wenn etwas eine Ganzzahl, eine alphanumerische Zeichenfolge oder eine HTTP-URL sein muss."

Bei der Frontend-Eingabeprüfung ist es unsere Aufgabe angemessene Einschränkungen auferlegen bei Benutzereingabe. Die Funktion zur Überprüfung der Einschränkung von HTML5 bietet uns die Mittel dazu.

Überprüfung der HTML5-Einschränkung

Vor HTML5 waren Frontend-Entwickler auf beschränkt Validierung der Benutzereingabe mit JavaScript, Das war ein langwieriger und fehleranfälliger Prozess. Um die clientseitige Formularüberprüfung zu verbessern, wurde in HTML5 ein eingeführt Constraint-Validierung Algorithmus, der in modernen Browsern läuft, und prüft die Gültigkeit der übergebenen Eingabe.

Zur Auswertung verwendet der Algorithmus die Validierungsbezogene Attribute von Eingabeelementen, sowie , </code>, und <code><select></code>. Wenn Sie wissen möchten, wie die Überprüfung der Einschränkung Schritt für Schritt im Browser durchgeführt wird, lesen Sie dieses WhatWG-Dokument.</p> <p>Dank der Funktion zur Überprüfung der Einschränkung von HTML5 können wir alle ausführen <strong>Standardeingabevalidierungsaufgaben</strong> auf der clientseite <strong>ohne JavaScript, ausschließlich mit HTML5</strong>.</p> <p>Um komplexere Aufgaben im Zusammenhang mit der Validierung auszuführen, stellt HTML5 uns ein <strong>JavaScript-API für die Überprüfung der Einschränkung</strong> Wir können unsere benutzerdefinierten Validierungsskripts einrichten.</p> <h4>Bestätigen Sie mit semantischen Eingabetypen</h4> <p>HTML5 wurde eingeführt <strong>semantische Eingabetypen</strong> das - abgesehen von der Angabe der Bedeutung des Elements für Benutzeragenten - auch verwendet werden kann <strong>Benutzereingabe überprüfen</strong> Benutzer auf ein bestimmtes Eingabeformat beschränken.</p> <p>Neben den bereits vor HTML5 existierenden Eingabetypen (<code>Text</code>, <code>Passwort</code>, <code>einreichen</code>, <code>zurücksetzen</code>, <code>Radio</code>, <code>Kontrollkästchen</code>, <code>Taste</code>, <code>versteckt</code>) können wir auch folgendes verwenden <strong>semantische HTML5-Eingabetypen</strong>: <code>Email</code>,<code>tel</code>,<code>url</code>,<code>Nummer</code>,<code>Zeit</code>,<code>Datum</code>,<code>Terminzeit</code>,<code>datetime-local</code>, <code>Monat</code>,<code>Woche</code>, <code>Angebot</code>, <code>Suche</code>,<code>Farbe</code>.</p> <p>Wir können HTML5-Eingabetypen sicher mit älteren Browsern verwenden, da sie sich wie eine <code><input type="text"></code> Feld in Browsern, die sie nicht unterstützen.</p> <p>Mal sehen, was passiert, wenn der Benutzer den falschen Eingabetyp eingibt. Angenommen, wir haben ein E-Mail-Eingabefeld mit folgendem Code erstellt:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Deine E-Mail:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Wenn der Benutzer eine Zeichenfolge eingibt, die kein E-Mail-Format verwendet, den Algorithmus für die Überprüfung der Nebenbedingungen <strong>schickt das Formular nicht ab</strong>, und <strong>gibt eine Fehlermeldung zurück</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Die gleiche Regel gilt auch für andere Eingabetypen, beispielsweise für <code>Typ = "URL"</code> Benutzer können nur eine Eingabe übermitteln, die dem URL-Format folgt (beginnt mit einem Protokoll, z. B. <code>http: //</code> oder <code>ftp: //</code>).</p> <p>Einige Eingabetypen verwenden ein Design <strong>Benutzer können nicht einmal ein falsches Eingabeformat eingeben</strong>, zum Beispiel <code>Farbe</code> und <code>Angebot</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Hintergrundfarbe:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Wenn wir das benutzen <code>Farbe</code> Eingabetyp Der Benutzer muss entweder eine Farbe aus dem Farbwähler auswählen oder die Standardfarbe Schwarz beibehalten. Das Eingabefeld ist <strong>vom Design eingeschränkt</strong>, Daher bleibt keine große Chance für Benutzerfehler.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Wenn es angebracht ist, lohnt es sich, die <code><select></code> HTML-Tag, das ähnlich wie diese eingangsabhängigen Eingabetypen funktioniert; Benutzer können aus einer Dropdown-Liste auswählen.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Deine Lieblingsfrucht:</label> <select name="fruit"> <option value="apple">Apfel</option> <option value="pear">Birne</option> <option value="orange">Orange</option> <option value="raspberry">Himbeere</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Verwenden Sie die Validierungsattribute von HTML5</h4> <p>Durch die Verwendung semantischer Eingabetypen werden bestimmte Einschränkungen festgelegt, was Benutzer einreichen dürfen. In vielen Fällen möchten wir jedoch ein wenig weiter gehen. Dies ist, wenn die <strong>Validierungsbezogene Attribute</strong> des <code><input></code> tag kann uns helfen.</p> <p>Validierungsbezogene Attribute gehören zu bestimmten Eingabetypen (sie können nicht verwendet werden.) <em>alles</em> Typen), für die sie weitere Einschränkungen auferlegen.</p> <h5>1. <code>erforderlich</code> um auf jeden Fall eine gültige Eingabe zu erhalten</h5> <p>Das <code>erforderlich</code> Attribut ist das bekannteste HTML-Validierungsattribut. Es ist ein <strong>boolesches Attribut</strong> was es bedeutet <strong>nimmt keinen Wert an</strong>, wir müssen es einfach in die <code><input></code> tag, wenn wir es verwenden wollen:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Wenn der Benutzer vergisst, einen Wert in ein erforderliches Eingabefeld einzugeben, wird der Browser angezeigt <strong>gibt eine Fehlermeldung zurück</strong> das warnt sie, das Feld auszufüllen, und sie <strong>Das Formular kann nicht gesendet werden</strong> bis sie eine gültige Eingabe geliefert haben. Deshalb ist es immer wichtig <strong>visuell markieren</strong> Pflichtfelder für Benutzer.</p> <p>Das <code>erforderlich</code> Attribut kann sein <strong>zusammen mit den folgenden Eingabetypen verwendet</strong>: <code>Text</code>, <code>Suche</code>, <code>url</code>, <code>tel</code>, <code>Email</code>, <code>Passwort</code>, <code>Datum</code>, <code>Terminzeit</code>, <code>datetime-local</code>, <code>Monat</code>, <code>Woche</code>,<code>Zeit</code>, <code>Nummer</code>, <code>Kontrollkästchen</code>, <code>Radio</code>, <code>Datei</code>, Plus mit der <code><textarea></code>und <code><select></code> HTML-Tags.</p> <h5>2. <code>Mindest</code>, <code>max</code> und <code>Schritt</code> zur Nummernbestätigung</h5> <p>Das <code>Mindest</code>, <code>max</code> und <code>Schritt</code> Attribute ermöglichen es uns <strong>Einschränkungen für Zahleneingabefelder setzen</strong>. Sie können zusammen mit der verwendet werden <code>Angebot</code>, <code>Nummer</code>, <code>Datum</code>, <code>Monat</code>, <code>Woche</code>, <code>Terminzeit</code>, <code>datetime-local</code>, und <code>Zeit</code> Eingabetypen.</p> <p>Das <code>Mindest</code> und <code>max</code> Attribute bieten eine gute Möglichkeit, um leicht <strong>unangemessene Daten ausschließen</strong>. Im nachstehenden Beispiel müssen Benutzer beispielsweise ein Alter zwischen 18 und 120 Jahren einreichen.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Dein Alter:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Wenn der Algorithmus zur Überprüfung der Nebenbedingung auf eine Benutzereingabe stößt, die kleiner ist als die <code>Mindest</code>, oder größer als der <code>max</code> Wert verhindert, dass es das Backend erreicht, und gibt eine Fehlermeldung zurück.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>Das <code>Schritt</code> Attribut <strong>gibt ein numerisches Intervall an</strong> zwischen den zulässigen Werten eines numerischen Eingabefeldes. Wenn wir zum Beispiel möchten, dass Benutzer nur aus Schaltjahren auswählen, können wir das hinzufügen <code>Schritt = "4"</code> Attribut zu dem Feld. Im folgenden Beispiel habe ich die verwendet <code>Nummer</code> Eingabetyp, da es keine gibt <code>Typ = "Jahr"</code> in HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Dein Lieblingssprungsjahr:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Mit den voreingestellten Einschränkungen können Benutzer nur zwischen den Schaltjahren zwischen 1972 und 2016 wählen, wenn sie den kleinen Aufwärtspfeil verwenden, der im Lieferumfang enthalten ist <code>Nummer</code> Eingabetyp. Sie können auch manuell einen Wert in das Eingabefeld eingeben. Falls der Browser die Einschränkungen nicht erfüllt, gibt der Browser eine Fehlermeldung aus.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maximale Länge</code> für die Überprüfung der Textlänge</h5> <p>Das <code>maximale Länge</code> Attribut macht es möglich <strong>Legen Sie eine maximale Zeichenlänge fest</strong> für Texteingabefelder. Es kann zusammen mit der verwendet werden <code>Text</code>, <code>Suche</code>, <code>url</code>, <code>tel</code>, <code>Email</code> und <code>Passwort</code> Eingabetypen und mit der <code><textarea></code> HTML-Tag.</p> <p>Das <code>maximale Länge</code> Attribut kann eine hervorragende Lösung für Telefonnummernfelder sein, die nicht mehr als eine bestimmte Anzahl von Zeichen enthalten können, oder für Kontaktformulare, bei denen Benutzer nicht möchten, dass sie eine bestimmte Länge eingeben.</p> <p>Das folgende Codefragment zeigt ein Beispiel für Letzteres. Es beschränkt die Benutzernachrichten auf 500 Zeichen. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Nachricht (max. 500 Zeichen):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

Das maximale Länge Attribut gibt keine Fehlermeldung zurück, Der Browser lässt jedoch nicht zu, dass Benutzer mehr als die angegebene Zeichennummer eingeben. Deshalb ist es wichtig für Benutzer über die Einschränkung informieren, Andernfalls können sie nicht verstehen, warum sie nicht weiter tippen können.

 
 * Ihr Passwort: