Verwenden der HTML5 -Einschränkungs -API zur Formularvalidierung

Key Takeaways

• Die HTML5-Einschränkungs-API vereinfacht die Formularvalidierung, indem Entwicklern die Verwendung von JavaScript für grundlegende Validierungen vermeiden kann, wodurch der Prozess mehr Benutzer und Entwicklerfreunde gestaltet wird.
• grundlegende Validierung kann erreicht werden, indem geeignete Werte für das Typattribut von Eingabedelementen wie „E -Mail“ oder „URL“ verwendet werden. Zusätzliche Validierungsattribute wie Muster, Erforderlich, maxLength, min und max können verwendet werden, um grundlegende Einschränkungen zu implementieren.
• Für die komplexe Validierungslogik kann die HTML5-Einschränkungs-API zur Durchführung von Client-Seite-Validierung und Anzeigefehlermeldungen verwendet werden. Die API enthält eine setCustomvalidy () -Methode, mit der Felder als gültig oder ungültig werden und benutzerdefinierte Fehlermeldungen angezeigt werden können.

Die Validierung von Webformen war für viele Entwickler immer eine schmerzhafte Aufgabe. Es ist wirklich schwierig, die Client-Seiten-Validierung auf Benutzer sowie Entwicklerfreundlichkeit durchzuführen. Darüber hinaus ist es eine mühsame Aufgabe, die Benutzer über den Validierungsfehler auf eine angenehme Weise zu informieren. Die API von HTML5 Constraint Validation hilft Entwicklern, JavaScript für einfache Validierungen zu verwenden. Für eine komplexe Validierungslogik kann die API zur Durchführung von Client -Seitenvalidierung und zur Anzeige von Fehlermeldungen verwendet werden. In diesem Tutorial gebe ich Ihnen einen Überblick über die API HTML5 Constraint Validation und diskutieren, wie Sie sie in Ihren Projekten verwenden, um bessere Webformen zu erstellen. Bevor Sie weiter gehen, lesen Sie dieses Kompatibilitätsdiagramm, um sicherzustellen, welche Funktionen von Ihrem Browser unterstützt werden. Beachten Sie nur, dass die API der HTML5 -Einschränkungsvalidierung zwar eine hervorragende Möglichkeit bietet, Formularfelder zu validieren, aber immer eine Server -Seiten -Validierung durchgeführt werden muss.

grundlegende Einschränkungsvalidierung

Grundlegende Validierung kann durchgeführt werden, indem die am besten geeigneten Werte für das Typattribut von Eingabeelementen ausgewählt werden. Sie können beispielsweise eine E -Mail validieren, indem Sie die folgende HTML schreiben:

<span><span><span><input> type<span>=”email”</span> /></span>		//The field value must be an email</span></span>

Sie können eine URL validieren, indem Sie das folgende Markup schreiben:

<span><span><span><input> type<span>=”URL”</span> /></span>			// The field value must be a URL</span></span>

Durch die Verwendung von E -Mail oder URL als Wert für den Typ Attribut, eine Einschränkung wird automatisch hinzugefügt und die Felder werden automatisch validiert, wenn das Formular eingereicht wird. Der Browser zeigt auch eine Fehlermeldung auf sehr benutzerfreundliche Weise an, wenn Validierungsfehler auftreten. Es gibt auch mehrere validierungsbasierte Attribute, die Sie in Ihrem Formular verwenden können. Im Folgenden finden Sie einige der Attribute, mit denen grundlegende Einschränkungen implementiert werden können:

1. Muster: Das Musterattribut wird verwendet, um einen regulären Ausdruck anzugeben, und der Feldwert muss mit diesem Muster übereinstimmen. Dieses Attribut kann mit Eingabetypen wie Text, Kennwort, E -Mail, URL, Tel und Suche verwendet werden. Beispielsweise verwendet das folgende HTML -Snippet ein Musterattribut für ein Eingabefeld.

   <span><span><span><input> type<span>=”text”</span> pattern<span>=”[1-4]{5}”</span> /></span></span></span>

   Wenn das Formular eingereicht wird, wird die Validierung im Eingabebuch durchgeführt. Infolgedessen wird in diesem Fall ein Wert wie ABCD die Validierung nicht bestehen.
2. Erforderlich: Ein erforderliches Attribut zeigt an, dass für das Eingabeelement ein Wert angegeben werden muss.

   <span><span><span><input> type<span>=”email”</span> /></span>		//The field value must be an email</span></span>

   Der obige Ausschnitt verwendet das erforderliche Attribut. Wenn Sie das Feld leer lassen und versuchen, das Formular einzureichen, tritt ein Validierungsfehler auf.
3. MaxLength: Dies ist ein Ganzzahlwert, der die maximale Anzahl von Zeichen angibt, die für ein bestimmtes Eingabefeld zulässig sind.

   <span><span><span><input> type<span>=”URL”</span> /></span>			// The field value must be a URL</span></span>

   Der obige Ausschnitt fügt dem Eingangsfeld eine Obergrenze hinzu. Der in diesem Eingabeelement eingegebene Wert muss weniger als 20 Zeichen lang sein.
4. min & max: Wie die Namen schon sagt, geben die min- und max -Attribute die untere und obere Grenze für ein Eingabeelement an.
.

Umgang mit komplexen Einschränkungen

Komplexe Validierungslogiken können mit der HTML5 -Constraint -API einfach behandelt werden. Sie können beispielsweise ein Feld Passwort und ein Feld Bestätigungskennwort haben. Sie müssen sicherstellen, dass die Werte in beiden Feldern zum Zeitpunkt der Einreichung gleich sind. Wenn nicht, sollte dem Benutzer eine Fehlermeldung angezeigt werden. Dies kann tatsächlich sehr einfach mit der HTML5 -Beschränkungs -API erfolgen. Zunächst müssen wir einen Onchange -Listener an Passwortfelder anhängen. Das folgende Ausschnitt zeigt das HTML -Formular.

<span><span><span><input> type<span>=”email”</span> /></span>		//The field value must be an email</span></span>

Da es keine Einreichungsereignisse geben wird, bis alle Felder vollständig validiert sind, gibt es wirklich keine Möglichkeit zu wissen, wann das Formular eingereicht wird. Deshalb interessieren wir uns für das Change -Event. Immer wenn ein Änderungsereignis abgefeuert wird, müssen wir überprüfen, ob beide Passwörter übereinstimmen. Wenn ja, rufen wir setCustomvality () im Eingabeelement (in diesem Fall Kennwort) mit einer leeren Zeichenfolge als Argument auf. Dies bedeutet, dass das Kennwortfeld als gültig gekennzeichnet ist und daher, wenn das Formular eingereicht wird, keinen Validierungsfehler gibt. Wenn wir dagegen feststellen, dass die Passwörter nicht mit einer Änderung übereinstimmen Ereignis wir nennen setCustomvality () mit einer Fehlermeldung als Argument. Dies bedeutet, dass das Kennwortfeld als ungültig markiert wird und die Fehlermeldung angezeigt wird, wenn der Benutzer das Formular einreicht. Das folgende JavaScript implementiert diese Logik:

<span><span><span><input> type<span>=”URL”</span> /></span>			// The field value must be a URL</span></span>

Das Beste an der Verwendung des obigen Ansatzes ist, dass Sie sich keine Sorgen machen müssen, wie die Fehlermeldung dem Benutzer vorgestellt werden soll. Sie müssen nur eine einfache Methode aufrufen - setCustomvality () - mit geeigneten Argumenten und die Fehlermeldung wird entsprechend angezeigt.

Schlussfolgerung

Sie können viele einfache bis erweiterte Einschränkungen mit der HTML5 -API HTML5 Constraint Validation implementieren. Die API bietet eine Reihe von Tools zum Anpassen des Validierungsprozesses. Wir haben gerade einen Teil der API besprochen. Um über fortgeschrittenere Konzepte wie CSS -Hooks zu erfahren, sehen Sie sich dieses Tutorial in Mozilla an.

häufig gestellte Fragen zur HTML5 -Einschränkungs -API für die Formularvalidierung

Was ist die HTML5 -Einschränkungs -API und warum ist sie für die Formularvalidierung wichtig? Es ist wichtig für die Formularvalidierung, da es eine standardisierte Möglichkeit bietet, sicherzustellen, dass die Benutzereingabe bestimmte Kriterien erfüllt, bevor sie übermittelt werden. Dies kann dazu beitragen, Fehler zu verhindern und die Benutzererfahrung zu verbessern, indem sie sofortiges Feedback zur Gültigkeit ihrer Eingabe bereitgestellt wird.

Wie unterscheidet sich die Einschränkungs -API von herkömmlichen JavaScript -Validierungsmethoden? Dies kann zeitaufwändig und fehleranfällig sein. Die Einschränkungs -API hingegen liefert einen standardisierten Satz von Methoden und Eigenschaften, mit denen Formularfelder validiert werden können. Dies kann Ihren Code effizienter und einfacher zu pflegen. einschließlich Textfeldern, Kontrollkästchen, Optionsfeldern und Auswahlmenüs. Es funktioniert jedoch möglicherweise nicht mit einigen Arten von Feldern oder Feldern, die mit Bibliotheken von Drittanbietern erstellt wurden. Bietet eine SETVality -Methode, mit der Sie benutzerdefinierte Fehlermeldungen festlegen können. Sie können diese Methode in Verbindung mit der ValidationMessage-Eigenschaft verwenden, um benutzerdefinierte Fehlermeldungen anzuzeigen, wenn ein Formularfeld fehlschlägt. Die Einschränkungs-API ist eine kundenseitige Technologie, dh sie wird im Browser des Benutzers ausgeführt. Sie können es jedoch in Verbindung mit serverseitigen Validierungsmethoden verwenden, um eine robustere Validierungslösung bereitzustellen. Es ist wichtig, die Benutzereingaben immer auf der serverseitigen Validierung zu validieren, da die clientseitige Validierung von böswilligen Benutzern umgangen werden kann. 🎜> Die Einschränkungs -API enthält eine Checkvaliditätsmethode, mit der alle Felder gleichzeitig validiert werden können. Diese Methode gibt einen booleschen Wert zurück, der angibt, ob alle Felder im Formular gültig sind. mit HTML5 -Formelementen zu arbeiten. Es bietet eine Reihe von Methoden und Eigenschaften, mit denen diese Elemente validieren und sicherstellen können, dass die Benutzereingabe bestimmte Kriterien erfüllt. 🎜> Die Einschränkungs-API kann in Verbindung mit JavaScript-Ereignishörern verwendet werden, um Formfelder in Echtzeit zu validieren. Sie können beispielsweise das Eingabeereignis verwenden, um ein Feld jedes Mal zu validieren, wenn der Benutzer in ihn eingreift. Ein Merkmal von HTML5, daher kann es bei älteren Browsern möglicherweise nicht unterstützt werden. Sie können jedoch die Funktionserkennung verwenden, um zu überprüfen, ob die Einschränkungs -API verfügbar ist

Wie kann ich die Einschränkungs -API verwenden, um Formulare in einem mobilen Kontext zu validieren? Möglicherweise müssen Sie jedoch Ihre Validierungsregeln anpassen, um die verschiedenen Eingabemethoden und Bildschirmgrößen von mobilen Geräten zu berücksichtigen.

Das obige ist der detaillierte Inhalt vonVerwenden der HTML5 -Einschränkungs -API zur Formularvalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!