Die vollständige Anleitung zu HTML -Formularen und Einschränkungsvalidierung-CSS-Tutorial-php.cn

Inhaltsverzeichnis

Key Takeaways

HTML5 -Eingangsfelder

HTML -Ausgangsfelder

Erstellen benutzerdefinierter JavaScript -Eingänge

1. Standardkontrollen sind schwer zu stylen

JavaScript und die Einschränkungsvalidierungs -API

Formularvalidierung

Feldvalidierung

Erstellen eines benutzerdefinierten Formulars Validator

Form Finesse

Wie verbessert HTML5 die Formularvalidierung? Beispielsweise bietet es neue Eingangstypen wie E -Mail, URL und Nummer, die die Eingabedaten automatisch basierend auf dem Typ validieren. Außerdem werden neue Attribute wie Erforderliche, Muster und Min/Max eingeführt, mit denen Sie verschiedene Einschränkungen für die Eingabedaten angeben können. Darüber hinaus bietet HTML5 eine integrierte Validierungs-API, mit der Sie eine benutzerdefinierte Validierung mit JavaScript durchführen können. allein. HTML5 bietet mehrere neue Eingangstypen und -attribute, mit denen Sie verschiedene Einschränkungen für die Eingabedaten angeben können. Beispielsweise können Sie das erforderliche Attribut verwenden, um ein Feld obligatorisch zu gestalten, das Musterattribut, um ein bestimmtes Format durchzusetzen, und die min/max -Attribute, um einen Bereich für numerische Eingaben festzulegen. Für eine komplexere Validierung müssen Sie jedoch JavaScript möglicherweise weiterhin verwenden. Fehlermeldungen. Sie können die SetCustomvalidity -Methode des ValidityState -Objekts verwenden, um eine benutzerdefinierte Fehlermeldung für ein Feld festzulegen. Diese Methode enthält ein String -Argument, das zur Validierungsnachricht des Feldes wird, wenn das Feld ungültig ist. Sie können diese Methode als Antwort auf das ungültige Ereignis aufrufen, das bei der Versäumnis eines Feldes ausgelöst wird. Novalidate Attribut zum Formularelement. Wenn dieses Attribut vorhanden ist, führt der Browser keine Validierung des Formulars durch, wenn es eingereicht wird. Dies kann nützlich sein, wenn Sie die Validierung vollständig auf der serverseitigen oder benutzerdefinierten JavaScript verarbeiten möchten. um mehrere Felder gemeinsam zu validieren. Sie können dies jedoch mit JavaScript erreichen. Sie können eine benutzerdefinierte Validierungsfunktion schreiben, die die Werte mehrerer Felder überprüft und eine benutzerdefinierte Gültigkeitsnachricht festlegt, wenn sie nicht die erforderlichen Kriterien erfüllen. Sie können diese Funktion als Antwort auf das Subjektereignis des Formulars oder die Eingabe-/Änderungsereignisse des Felders aufrufen. Bietet keine integrierte Möglichkeit, ein Feld basierend auf dem Wert eines anderen Feldes zu validieren. Sie können dies jedoch mit JavaScript erreichen. Sie können eine benutzerdefinierte Validierungsfunktion schreiben, die den Wert eines Feldes gegen den Wert eines anderen Feldes überprüft und eine benutzerdefinierte Gültigkeitsnachricht festlegt, wenn diese nicht übereinstimmen. Sie können diese Funktion als Antwort auf die Eingabe-/Änderungsereignisse der Felder aufrufen.

Wie kann ich eine asynchrone Validierung in HTML5 durchführen? Sie können dies jedoch mit JavaScript erreichen. Sie können eine benutzerdefinierte Validierungsfunktion schreiben, die einen asynchronen Vorgang wie eine AJAX -Anforderung ausführt und eine benutzerdefinierte Gültigkeitsnachricht basierend auf dem Ergebnis festlegt. Sie können diese Funktion als Antwort auf die Eingabe-/Änderungsereignisse der Felder oder das Sendenereignis des Formulars aufrufen. Nachrichten in der HTML5 -Formularvalidierung werden vom Browser bestimmt und können nicht direkt mit CSS gestylt werden. Sie können jedoch benutzerdefinierte Fehlermeldungen mit JavaScript erstellen und sie nach möchten. Sie können die Validierungs -API verwenden, um festzustellen, wann ein Feld ungültig ist, und eine benutzerdefinierte Fehlermeldung entsprechend anzeigen. Ein HTML -Formular durch Eingabe verschiedener Datenarten in die Felder und versucht, das Formular einzureichen. Sie sollten sowohl gültige als auch ungültige Daten testen, um sicherzustellen, dass die Validierung in allen Fällen korrekt funktioniert. Sie können auch automatisierte Testwerkzeuge oder Bibliotheken verwenden, um umfassendere Tests durchzuführen.

Heim

Web-Frontend

CSS-Tutorial

Die vollständige Anleitung zu HTML -Formularen und Einschränkungsvalidierung

尊渡假赌尊渡假赌尊渡假赌

Feb 10, 2025 am 08:27 AM

Die vollständige Anleitung zu HTML -Formularen und Einschränkungsvalidierung

In diesem Artikel betrachten wir die HTML -Formularfelder und die von HTML5 angebotenen Validierungsoptionen. Wir werden uns auch ansehen, wie diese durch die Verwendung von CSS und JavaScript verbessert werden können.

Key Takeaways

HTML5 verbessert die Formularvalidierung durch Einführung neuer Eingangstypen und -attribute, die viele Validierungsprozesse automatisieren und die Notwendigkeit eines umfangreichen JavaScripts verringern.
Einschränkungsvalidierung in HTML5 ermöglicht es Browsern, die Benutzereingaben automatisch gegen bestimmte Regeln vor der Einreichung zu überprüfen und die Benutzererfahrung und die Datenintegrität zu verbessern.
clientseitige Validierung, obwohl sie hilfreich sind, um gemeinsame Fehler zu erfassen, muss mit der serverseitigen Validierung ergänzt werden, um die Sicherheit und Integrität der Daten zu gewährleisten.
benutzerdefinierte JavaScript -Eingaben sollten nach Möglichkeit vermieden werden, da sie die Zugänglichkeit komplizieren und mit nativen Browserfunktionen in Konflikt stehen.
CSS kann verwendet werden, um Eingabefelder basierend auf ihrem Validierungszustand zu stylen, mit Pseudoklassen wie: gültig und: ungültig, sodass dynamisches Feedback zu Benutzereingaben.
Die Einschränkungsvalidierungs -API in HTML5 ermöglicht benutzerdefinierte Validierungsszenarien, die HTML allein nicht verarbeiten kann, z.

Was ist die Einschränkungsvalidierung?

Jedes Formfeld hat einen Zweck. Und dieser Zweck wird häufig von Krankenstägern oder den Regeln geregelt, die das regeln, was in jedes Feld "jedes Formular" eingegeben werden sollte und nicht. Beispielsweise erfordert ein E -Mail -Feld eine gültige E -Mail -Adresse. Für ein Kennwortfeld ist möglicherweise bestimmte Arten von Zeichen erforderlich und verfügt über eine minimale Anzahl der erforderlichen Zeichen. und ein Textfeld könnte eine Grenze dafür haben, wie viele Zeichen eingegeben werden können.

moderne Browser können überprüfen, ob diese Einschränkungen von den Benutzern beobachtet werden, und können sie warnen, wenn diese Regeln verletzt wurden. Dies wird als Fortschrittsvalidierung bezeichnet.

clientseitig gegen serverseitige Validierung

Der Großteil des JavaScript-Codes, der in den frühen Jahren der Sprache geschrieben wurde, handhabte die validierende Formformulare. Noch heute verbringen Entwickler erhebliche Zeit mit dem Schreiben von Funktionen, um die Feldwerte zu überprüfen.

Ist das in modernen Browsern noch notwendig? Wahrscheinlich nicht . In den meisten Fällen hängt es wirklich davon ab, was Sie tun möchten.

Aber zuerst hier eine große Warnmeldung:

clientseitige Validierung ist eine Schönheit, die vorhanden gängige Dateneingängefehler verhindern kann, bevor eine App Zeit und Bandbreite verschwendet, die Daten an einen Server senden. Es ist kein Ersatz für die serverseitige Validierung!

sanitieren Sie die Datenserver-Seite immer. Nicht jede Anfrage kommt von einem Browser. Selbst wenn dies der Fall ist, gibt es keine Garantie dafür, dass der Browser die Daten validiert hat. Jeder, der weiß, wie man die Entwickler -Tools eines Browsers öffnet, kann auch Ihre liebevoll gestaltete HTML und JavaScript umgehen.

HTML5 -Eingangsfelder

HTML -Angebote:

Für multiline Textfelder
für… buttons

, aber Sie verwenden am häufigsten:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Nach dem Login kopieren

Das Typ -Attribut legt den Steuertyp fest und es gibt eine große Auswahl an Optionen:

Typ Beschreibung Taste Eine Taste ohne Standardverhalten Kontrollkästchen Ein Kontrollkästchen für Check/Tick Farbe ein Farbwähler Datum Ein Date -Picker für das Jahr, Monat und Tag datetime-lokal Ein Datums- und Uhrzeitpicker E-Mail Ein E -Mail -Eintragsfeld Datei ein Datei -Picker versteckt ein verstecktes Feld Bild Eine Schaltfläche, auf der das vom SRC -Attribut definierte Bild angezeigt wird Monat einen Monat und ein Jahr Picker Nummer ein Zahleneintragsfeld Passwort Ein Kennworteintragsfeld mit verdecktem Text Radio ein Optionsknopf Reichweite eine Schiebereglerkontrolle zurücksetzen Eine Taste, die alle Formulareingänge auf ihre Standardwerte zurücksetzt (aber vermeiden Sie dies, da sie selten nützlich ist) suchen ein Sucheintragsfeld einreichen eine Formulareinstellungsschaltfläche Tel ein Telefonnummer -Eingangsfeld Text ein Texteintragsfeld Zeit ein Zeitpicker ohne Zeitzone URL Ein URL -Eingangsfeld Woche eine Woche und Jahr Picker

Der Browser fällt auf den Text zurück, wenn Sie das Typ -Attribut vom Typ weglassen oder eine Option nicht unterstützt. Moderne Browser haben eine gute Unterstützung für alle Typen, aber alte Browser zeigen weiterhin ein Texteintragsfeld.

Andere nützliche -attribute gehören:

Attribut Beschreibung akzeptieren Datei -Upload -Typ Alt Alternativer Text für die Bildtypen automatisch vervollständigt Hinweis für die automatische Vervollständigung von Feld Autofokus Fokusfeld auf Seite Laden erfassen Medienerfassung Eingabemethode überprüft Kontrollkästchen/Radio wird überprüft deaktiviert Deaktivieren Sie die Kontrolle (es wird nicht validiert oder den Wert einreichen) bilden assoziieren Sie mit dieser ID ein Formular Formaktion URL zur Einreichung bei Senden- und Bildschaltflächen inputMode Datentyp Hinweis Liste ID von Autokaponete Optionen Max Maximalwert Maxlenlänge Maximale Saitenlänge min Mindestwert Minlenlänge Minimale Stringlänge Name Name der Kontrolle, wie er an Server eingereicht wurde Muster ein reguläres Ausdrucksmuster wie [a-z] für ein oder mehrere Großbuchstaben-Zeichen Platzhalter Platzhaltertext, wenn der Feldwert leer ist Readonly Das Feld ist nicht bearbeitet, aber es wird weiterhin validiert und eingereicht erforderlich Das Feld ist erforderlich Größe Die Größe der Kontrolle (oft in CSS überschrieben) Rechtschreibprüfung Setzen Sie wahre oder falsche Zaubersprüche src Bild -URL Schritt inkrementelle Werte in Zahlen und Bereichen Typ Feldtyp (siehe oben) Wert der Anfangswert

HTML -Ausgangsfelder

sowie Eingangstypen liefert HTML5 schreibgeschützte Ausgänge:

Ausgabe: Ein Textergebnis einer Berechnung oder Benutzeraktion
Fortschritt: Ein Fortschrittsbalken mit Wert- und Maxattributen
Meter: Eine Skala, die sich je nach Werten, die für den Wert, min, max, niedrig, hoch, hoch, hoch, und optimale Attribute festgelegt werden können, ändern können.

Eingabetiketten

Felder sollten über ein zugehöriges verfügen, das Sie um das Element wickeln können:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Nach dem Login kopieren

oder verknüpfen Sie die ID des Feldes mit einem für das Attribut:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Nach dem Login kopieren

mit mit mit mit mit mit mit mit mit mit mit mit mit der ID ein.

Beschriftungen sind für die Zugänglichkeit wichtig. Möglicherweise haben Sie Formulare begegnet, die einen Platzhalter verwenden, um den Bildschirmraum zu sparen:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

Nach dem Login kopieren

Der Platzhaltertext verschwindet, sobald der Benutzer etwas tippt - sogar einen einzelnen Raum. Es ist besser, ein Etikett zu zeigen, als den Benutzer zu zwingen, was das Feld wollte!

Eingangsverhalten

Feldtypen und Einschränkungsattribute ändern das Eingabemittel des Browsers. Beispielsweise zeigt eine Zahleneingabe eine numerische Tastatur auf mobilen Geräten. Das Feld kann einen Spinner und eine Tastatur nach oben/unten -Cursor -Pressen zeigen und die Werte verringern.

Die meisten Feldtypen sind offensichtlich, aber es gibt Ausnahmen. Zum Beispiel sind Kreditkarten numerisch, aber der Inkrement-/Dekrement-Spinner ist nutzlos und es ist zu einfach, beim Eingeben einer 16-stelligen Zahl nach oben oder unten zu drücken. Es ist besser, einen Standardtextyp zu verwenden, aber das inputMode -Attribut auf numerisch festlegen, das eine geeignete Tastatur anzeigt. Das Einstellen autocomplete = "cc-number" schlägt auch alle vorkonfigurierten oder zuvor eingegebenen Kartennummern vor.

Verwenden des richtigen Feldtyps und der Autokorrektur bietet Vorteile, die in JavaScript schwierig zu erzielen sind. Zum Beispiel können einige mobile Browser:

gesendet wurden

Automatische Validierung

Der Browser stellt sicher, dass ein Eingangswert mit den durch den Typ, min, max, Schritt, minloenend, maximalen, maximalen und erforderlichen Attributen definierten Einschränkungen festhält. Zum Beispiel:

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Nach dem Login kopieren

Versuch, einen leeren Wert einzureichen, verhindert die Einreichung der Form.

Die vollständige Anleitung zu HTML -Formularen und Einschränkungsvalidierung

Die Spinner erlauben keine Werte außerhalb des Bereichs von 1 bis 100. Ähnliche Validierungsnachrichten werden angezeigt, wenn Sie eine Zeichenfolge eingeben, die keine Nummer ist. Alles ohne eine einzelne JavaScript -Zeile.

Sie können die Browser -Validierung beenden nach:

Hinzufügen eines Novalidat -Attributs zum
Element
Hinzufügen eines Formulars -Attributs zur Übermittlungstaste oder im Bild

Erstellen benutzerdefinierter JavaScript -Eingänge

Wenn Sie eine neue JavaScript-basierte Datumseintragskomponente schreiben, halten Sie bitte von Ihrer Tastatur an und gehen Sie von Ihrer Tastatur weg!

Das Schreiben von benutzerdefinierten Eingabesteuerungen ist schwierig. Sie müssen die Maus, Tastatur, Berührung, Sprache, Zugänglichkeit, Bildschirmabmessungen und was passiert, wenn JavaScript fehlschlägt. Sie erstellen auch eine andere Benutzererfahrung. Vielleicht ist Ihre Kontrolle dem Standard -Datumspicker auf Desktop, iOS und Android überlegen, aber die unbekannte Benutzeroberfläche wird einige Benutzer verwirren.

Es gibt drei Hauptgründe, warum Entwickler JavaScript-basierte Eingaben erstellen.

1. Standardkontrollen sind schwer zu stylen

CSS-Styling ist begrenzt und erfordert häufig Hacks, z. Die Situation verbessert

2. Moderne Typen werden in alten Browsern nicht unterstützt

im Wesentlichen kodieren Sie für den Internet Explorer. IE-Benutzer erhalten keinen Date-Picker, können aber dennoch Termine im YYYY-MM-DD-Format eingeben. Wenn Ihr Kunde darauf besteht, laden Sie eine Polyfill nur in IE. Es ist nicht nötig, moderne Browser zu belasten.

3. Sie benötigen einen neuen Eingangstyp, der noch nie vor

implementiert wurde

Diese Situationen sind selten, beginnen aber immer mit geeigneten HTML5 -Feldern. Sie sind schnell und funktionieren noch vor dem Laden des Skripts. Sie können die Felder nach Bedarf schrittweise verbessern. Beispielsweise kann ein Streut von JavaScript sicherstellen, dass ein Enddatum eines Kalenderereignisses nach einem Startdatum erfolgt.

Zusammenfassend:

Vermeiden Sie erneut HTML-Steuerelemente!

CSS -Validierungsstyling

Sie können die folgenden Pseudoklassen anwenden, um Felder einzugeben, um sie nach dem aktuellen Zustand zu stylen:

selector Beschreibung :Fokus das Feld mit Fokus : Fokus auf Ein Element enthält ein Feld mit Fokus (ja, es ist ein übergeordneter Selektor!) : fokussierbar Ein Element hat den Fokus aufgrund der Tastaturnavigation, daher ist ein Fokusring oder ein offeneres Styling erforderlich :erforderlich ein Feld mit einem erforderlichen Attribut : optional ein Feld ohne erforderliche Attribut :gültig ein Feld, das die Validierung bestanden hat :ungültig ein Feld, das keine Validierung bestanden hat : Benutzer-Valid Ein Feld, das die Validierung bestanden hat, nachdem der Benutzer mit ihm interagiert hat (nur Firefox) : Benutzer-Invention Ein Feld, das keine Validierung bestanden hat, nachdem der Benutzer mit ihm interagiert hat (nur Firefox) : In-Bereich Der Wert liegt in einem Bereich einer Anzahl oder Bereichseingangs in Reichweite : Out-of-Targe Der Wert liegt außerhalb des Bereichs einer Anzahl oder Bereiche Eingabe :deaktiviert ein Feld mit einem behinderten Attribut :ermöglicht ein Feld ohne behindertes Attribut : schreibgeschützte ein Feld mit einem schreibgeschützten Attribut : Leseschreiber: ein Feld ohne schreibgeschützte Attribut : überprüft Ein geprüftes Kontrollkästchen oder ein Optionsfeld :unbestimmt Ein unbestimmter Kontrollkästchen oder ein Funkstatus, z. B. wenn alle Optionsfelder deaktiviert sind :Standard Die Standardschaltfläche oder das standardmäßige Senden -Bild oder das Bild Sie können den Platzhaltertext eines Eingangs mit dem Pseudo-Element :: Platzhalter stylen:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Nach dem Login kopieren

Die obigen Selektoren haben die gleiche Spezifität, sodass die Reihenfolge wichtig sein kann. Betrachten Sie dieses Beispiel:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Nach dem Login kopieren

Ungültige Eingänge haben roten Text, aber es wird nur auf Eingaben mit einem deaktivierten Attribut angewendet - daher sind alle aktivierten Eingänge schwarz.

Der Browser wendet Validierungsstile auf die Seitenlade an. Beispielsweise erhält jedes ungültige Feld im folgenden Code einen roten Rand:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

Nach dem Login kopieren

Der Benutzer wird mit einem entmutigenden Satz roter Kästchen konfrontiert, bevor er mit dem Formular interagiert. Das Anzeigen von Validierungsfehlern nach dem ersten Senden oder als Wert, das geändert wird, bietet eine bessere Erfahrung. Hier tritt JavaScript in…

Schritte

JavaScript und die Einschränkungsvalidierungs -API

Die API für die Einschränkungsvalidierung bietet Formularanpassungsoptionen, mit denen die Standardprüfung der Standard -HTML -Bereiche verbessert werden kann. Sie könnten:

einreicht
anzeigen

Formularvalidierung

Bevor Sie die API verwenden, sollte Ihr Code die Standardvalidierung und Fehlermeldungen deaktivieren, indem die Novalidat -Eigenschaft des Formulars auf true festgelegt wird (das gleiche Hinzufügen eines Novalidat -Attributs):

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Nach dem Login kopieren

Sie können dann Ereignishandler hinzufügen - z. B. wenn das Formular einreicht:

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

Nach dem Login kopieren

Der Handler kann überprüfen, ob das gesamte Formular unter Verwendung der Methoden checkValidity () oder reportValidity () gültig ist, die true zurückgeben, wenn alle Eingaben des Formulars gültig sind. (Die Differenz besteht darin, dass Checkvalidity () prüft, ob Eingaben einer Einschränkungsvalidierung unterliegen.)

Die Mozilla -Dokumente erklären:

Ein ungültiges Ereignis wird auch in jedem ungültigen Feld ausgelöst. Dies sprudelt nicht: Handler müssen zu jedem Steuerelement hinzugefügt werden, das sie verwendet.

<span>/* blue placeholder on email fields */
</span><span>input<span><span>[type="email"]</span>::placeholder</span> {
</span>  <span>color: blue;
</span><span>}
</span>

Nach dem Login kopieren

Ein gültiges Formular könnte nun weitere Validierungsprüfungen entstehen. In ähnlicher Weise könnte ein ungültiges Formular ungültige Felder hervorgehoben haben.

Feldvalidierung

einzelne Felder haben die folgenden Eigenschaften der Einschränkungsvalidierung:

Willvalidat: Gibt true zurück, wenn das Element ein Kandidat für die Beschränkungsvalidierung ist.
ValidationMessage: Die Validierungsnachricht. Dies ist eine leere Zeichenfolge, wenn das Feld gültig ist.
Valitität: Ein ValidityState -Objekt. Dies hat einen gültigen Eigenschaftssatz, wenn das Feld gültig ist. Wenn es falsch ist, ist ein oder mehrere der folgenden Eigenschaften wahr:
ValidityState Beschreibung .Badinput Der Browser kann die Eingabe nicht verstehen .CustomeRror Eine benutzerdefinierte Gültigkeitsnachricht wurde festgelegt .patternMisMatch Der Wert stimmt nicht mit dem angegebenen Musterattribut überein .RangeOverflow Der Wert ist größer als das Max -Attribut .RangeUnterflow Der Wert ist geringer als das Min -Attribut .stepmismatch Der Wert passt nicht zu den Regeln der Stufenattribut .Toolong Die Stringlänge ist größer als das MaxLength -Attribut . TOOSHORT Die Stringlänge ist geringer als das Minlenlänge -Attribut .Typemismispatch Der Wert ist keine gültige E -Mail oder URL .Valuemissing Ein erforderlicher Wert ist leer

einzelne Felder haben die folgenden Einschränkungsvalidierungsmethoden:

setCustomvality (Meldung): Legt eine Fehlermeldung für ein ungültiges Feld fest. Eine leere Zeichenfolge muss übergeben werden, wenn das Feld gültig ist oder das Feld für immer ungültig bleibt.
checkvalidity (): Gibt true zurück, wenn die Eingabe gültig ist. Die Valitity.Valid -Eigenschaft macht dasselbe, aber Checkvalidity () löst auch ein ungültiges Ereignis auf dem Feld aus, was nützlich sein könnte.

Die Funktion validesForm () kann bei Bedarf durch jedes Feld über jedes Feld durchlaufen und eine ungültige Klasse auf sein übergeordnetes Element anwenden:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Nach dem Login kopieren

Angenommen, Ihre HTML definiert ein E -Mail -Feld:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Nach dem Login kopieren

Das Skript wendet eine ungültige Klasse auf die

an, wenn die E -Mail nicht angegeben ist oder ungültig ist. CSS kann die Validierungsnachricht angezeigt oder verbergen, wenn das Formular eingereicht wird:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

Nach dem Login kopieren

Erstellen eines benutzerdefinierten Formulars Validator

Die folgende Demonstration zeigt ein Beispielkontaktformular, das einen Benutzernamen und entweder eine E -Mail -Adresse, eine Telefonnummer oder beides erfordert:

Siehe den Stift Beispiel für API -Beispiel für die Beschränkungsvalidierung von SitePoint (@sinepoint) auf Codepen.

Es wird mithilfe einer generischen Formvalidierungsklasse mit dem Namen Formvalidat implementiert. Ein Formularelement wird beim Instanziieren eines Objekts übergeben. Ein optionaler zweiter Parameter kann festgelegt werden:

wahr, um jedes Feld zu validieren, wenn der Benutzer mit ihm interagiert
false (der Standard), um alle Felder zu validieren, nachdem das erste Subjekt (danach auf der Feldebene auftritt)

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Nach dem Login kopieren

an .addcustom (Feld, Func) definiert benutzerdefinierte Validierungsfunktionen. Der folgende Code stellt sicher

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

Nach dem Login kopieren

Ein Formvalidierungsobjekt überwacht beide folgende:

Fokusout -Ereignisse, die dann ein einzelnes Feld
Formular Senden Sie Ereignisse, die dann jedes Feld

Beide rufen die Methode .ValidateField (Feld) auf, wodurch überprüft wird, ob ein Feld die Standardbeschränkungsvalidierung übergeht. Wenn dies der Fall ist, führen alle benutzerdefinierten Validierungsfunktionen, die diesem Feld zugewiesen sind, nacheinander aus. Alle müssen true zurückkehren, damit das Feld gültig ist.

Ungültige Felder haben eine ungültige Klasse, die auf das übergeordnete Element des Feldes angewendet wird und eine rote Hilfsnachricht mit CSS anzeigt.

Schließlich ruft das Objekt eine benutzerdefinierte Sendungsfunktion auf, wenn das gesamte Formular gültig ist:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Nach dem Login kopieren

Alternativ können Sie ein Standard -AddEventListener verwenden, um Formular Senden -Ereignisse zu verarbeiten, da Formvalidate weitere Handler verhindert, wenn das Formular ungültig ist.

Form Finesse

Formulare sind die Grundlage aller Webanwendungen und Entwickler verbringen eine beträchtliche Zeit, um die Benutzereingaben zu manipulieren. Die Einschränkungsvalidierung wird gut unterstützt: Browser können die meisten Überprüfungen durchführen und entsprechende Eingaboptionen anzeigen.

Empfehlungen:

Verwenden Sie nach Möglichkeit die Standard -HTML -Eingangstypen. Setzen Sie min, max, stufen, minlengt, maxLength, Muster, Erforderlich, inputMode und automatische Attribute nachgegeben.

schließlich: Vergessen Sie den Internet Explorer!

es sei nicht erforderlich, Ihre eigenen Fallback -Validierungsfunktionen zu implementieren. Alle HTML5 -Eingabefelder funktionieren in IE, erfordern jedoch möglicherweise mehr Benutzeranstrengungen. (Zum Beispiel wird der IE nicht erkannt, wenn Sie eine ungültige E -Mail -Adresse eingeben.) Sie müssen weiterhin Daten auf dem Server validieren. Erwägen Sie daher, diese als Grundlage für die IE -Fehlerprüfung zu verwenden.

häufig gestellte Fragen (FAQs) zu HTML -Formularen und Einschränkungsvalidierung

Was ist die Bedeutung der HTML -Formularvalidierung? Es stellt sicher, dass die von den Benutzern in ein Formular eingegebenen Daten bestimmte Kriterien erfüllen, bevor sie an den Server gesendet werden. Dies behält nicht nur die Integrität der Daten bei, sondern verbessert auch die Benutzererfahrung, indem sie sofortiges Feedback zur Richtigkeit der eingegebenen Daten bereitgestellt wird. Ohne Formularvalidierung besteht das Risiko, falsche, unvollständige oder sogar böswillige Daten zu erhalten, was zu verschiedenen Problemen führen kann, einschließlich Datenbeschäftigung, Sicherheitsverletzungen und Systemabstürzen.

Wie verbessert HTML5 die Formularvalidierung? Beispielsweise bietet es neue Eingangstypen wie E -Mail, URL und Nummer, die die Eingabedaten automatisch basierend auf dem Typ validieren. Außerdem werden neue Attribute wie Erforderliche, Muster und Min/Max eingeführt, mit denen Sie verschiedene Einschränkungen für die Eingabedaten angeben können. Darüber hinaus bietet HTML5 eine integrierte Validierungs-API, mit der Sie eine benutzerdefinierte Validierung mit JavaScript durchführen können. allein. HTML5 bietet mehrere neue Eingangstypen und -attribute, mit denen Sie verschiedene Einschränkungen für die Eingabedaten angeben können. Beispielsweise können Sie das erforderliche Attribut verwenden, um ein Feld obligatorisch zu gestalten, das Musterattribut, um ein bestimmtes Format durchzusetzen, und die min/max -Attribute, um einen Bereich für numerische Eingaben festzulegen. Für eine komplexere Validierung müssen Sie jedoch JavaScript möglicherweise weiterhin verwenden. Fehlermeldungen. Sie können die SetCustomvalidity -Methode des ValidityState -Objekts verwenden, um eine benutzerdefinierte Fehlermeldung für ein Feld festzulegen. Diese Methode enthält ein String -Argument, das zur Validierungsnachricht des Feldes wird, wenn das Feld ungültig ist. Sie können diese Methode als Antwort auf das ungültige Ereignis aufrufen, das bei der Versäumnis eines Feldes ausgelöst wird. Novalidate Attribut zum Formularelement. Wenn dieses Attribut vorhanden ist, führt der Browser keine Validierung des Formulars durch, wenn es eingereicht wird. Dies kann nützlich sein, wenn Sie die Validierung vollständig auf der serverseitigen oder benutzerdefinierten JavaScript verarbeiten möchten. um mehrere Felder gemeinsam zu validieren. Sie können dies jedoch mit JavaScript erreichen. Sie können eine benutzerdefinierte Validierungsfunktion schreiben, die die Werte mehrerer Felder überprüft und eine benutzerdefinierte Gültigkeitsnachricht festlegt, wenn sie nicht die erforderlichen Kriterien erfüllen. Sie können diese Funktion als Antwort auf das Subjektereignis des Formulars oder die Eingabe-/Änderungsereignisse des Felders aufrufen. Bietet keine integrierte Möglichkeit, ein Feld basierend auf dem Wert eines anderen Feldes zu validieren. Sie können dies jedoch mit JavaScript erreichen. Sie können eine benutzerdefinierte Validierungsfunktion schreiben, die den Wert eines Feldes gegen den Wert eines anderen Feldes überprüft und eine benutzerdefinierte Gültigkeitsnachricht festlegt, wenn diese nicht übereinstimmen. Sie können diese Funktion als Antwort auf die Eingabe-/Änderungsereignisse der Felder aufrufen.

Wie kann ich eine asynchrone Validierung in HTML5 durchführen? Sie können dies jedoch mit JavaScript erreichen. Sie können eine benutzerdefinierte Validierungsfunktion schreiben, die einen asynchronen Vorgang wie eine AJAX -Anforderung ausführt und eine benutzerdefinierte Gültigkeitsnachricht basierend auf dem Ergebnis festlegt. Sie können diese Funktion als Antwort auf die Eingabe-/Änderungsereignisse der Felder oder das Sendenereignis des Formulars aufrufen. Nachrichten in der HTML5 -Formularvalidierung werden vom Browser bestimmt und können nicht direkt mit CSS gestylt werden. Sie können jedoch benutzerdefinierte Fehlermeldungen mit JavaScript erstellen und sie nach möchten. Sie können die Validierungs -API verwenden, um festzustellen, wann ein Feld ungültig ist, und eine benutzerdefinierte Fehlermeldung entsprechend anzeigen. Ein HTML -Formular durch Eingabe verschiedener Datenarten in die Felder und versucht, das Formular einzureichen. Sie sollten sowohl gültige als auch ungültige Daten testen, um sicherzustellen, dass die Validierung in allen Fällen korrekt funktioniert. Sie können auch automatisierte Testwerkzeuge oder Bibliotheken verwenden, um umfassendere Tests durchzuführen.

Das obige ist der detaillierte Inhalt vonDie vollständige Anleitung zu HTML -Formularen und Einschränkungsvalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

4 Wochen vor By DDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

3 Wochen vor By DDD

Inzoi: Wie man sich für Schule und Universität bewerbt

4 Wochen vor By DDD

Wie kann ich KB5055518 in Windows 10 nicht installieren?

3 Wochen vor By DDD

Wo finden Sie den Site Office -Schlüssel in Atomfall

4 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7886

Java-Tutorial

1649

CakePHP-Tutorial

1410

Laravel-Tutorial

1301

PHP-Tutorial

1246

Related knowledge

Vue 3 Apr 02, 2025 pm 06:32 PM

Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.

Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten? Apr 02, 2025 pm 06:17 PM

Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.

Ein bisschen auf CI/CD Apr 02, 2025 pm 06:21 PM

Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:

Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass Apr 03, 2025 am 10:30 AM

Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.

Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor Apr 02, 2025 am 04:27 AM

Wenn wir dem Benutzer direkt im WordPress -Editor Dokumentation anzeigen müssen, wie können Sie dies am besten tun?

Vergleich von Browsern für reaktionsschnelles Design Apr 02, 2025 pm 06:25 PM

Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben

So verwenden Sie CSS -Gitter für klebrige Header und Fußzeilen Apr 02, 2025 pm 06:29 PM

CSS Grid ist eine Sammlung von Eigenschaften, die das Layout einfacher machen als jemals zuvor. Wie alles andere ist es eine kleine Lernkurve, aber das Gitter ist

Google -Schriftarten variable Schriftarten Apr 09, 2025 am 10:42 AM

Ich sehe, dass Google -Schriftarten ein neues Design (Tweet) ausgelöst haben. Im Vergleich zur letzten großen Neugestaltung fühlt sich dies viel iterativer an. Ich kann den Unterschied kaum erkennen

See all articles