Formulare sind der Hauptbestandteil des HTML -Dokuments zum Sammeln von Benutzerdaten und Informationen. Um die korrekten Eingaben im Formular von den Benutzern zu erhalten, müssen die Benutzer die Eingabe ungültiger Informationen beschränken. Entwickler müssen einige Validierungsprüfungen zu HTML -Dokumenten hinzufügen. Zu diesem Zweck kann der Benutzer verschiedene Objekte des Formulars Validierung hinzufügen, z. B. die Validierung der Telefonnummer über die “Muster”Attribut.

In diesem Beitrag wird erläutert, wie die HTML5 -Telefonnummer -Validierung mit dem Muster angewendet wird.

So wenden Sie die HTML5 -Telefonnummer -Validierung mit Muster an?

Befolgen Sie die angegebenen Anweisungen, um eine Validierung der Telefonnummer mit einem Muster hinzuzufügen.

Schritt 1: Erstellen Sie einen Div -Container

Machen Sie zunächst einen „DIV“ -Container, indem Sie die “verwendenElement und zuweisen die “Ausweis”Attribut.

Schritt 2: Überschriften hinzufügen

Fügen Sie als nächstes zwei Überschriften mit der "hinzu"

" Und "

" Stichworte. Der "

"Tag wird verwendet, um die Überschrift von Level 1 und" zu betten "

Gibt die Überschrift von Level 2 an.

Schritt 3: Formular erstellen

Erstellen Sie als nächstes ein Formular mit der “Tag zusammen mit den folgenden Elementen:

• Einlegen Sie “"Tag zusammen mit dem"für”Attribut zum Beschriften des Elements. Das Attribut "für" bezieht das spezifische Element mit der Etikett.
• “”Element wird nach dem hinzugefügt“Tag, das sich auf ein Eingabefeld zum Einfügen von Daten bezieht.
• Das Element "" sind mit "Typ" und "Muster" -attribute versehen.
• Der "TypDas Attribut bestimmt den bestimmten Typ der definierten Eingabe. Verwenden Sie die “Tel"Wert dafür, die Telefonnummer vom Benutzer zu erhalten.
• Der "Muster”Definiert das Format der angegebenen Eingabetypen, einschließlich E -Mail, Datum, Text, Suche, URL, Tel und Passwort.
• Erstellen Sie eine Schaltfläche mit "Typ" als "Taste"Und" Wert "als"Eingeben”:

LinuxHint Ltd UK

HTML5 -Telefonnummer -Validierung mit Muster

Format der Telefonnummer: xxx-xxx-xxxx


Telefonnummer:

Ausgang

Schritt 4: Stil „Div“ Element

Um das zu stylendiv”Element, zuerst auf das Element mit der ID zugreifen“#Validierung”Und wenden Sie die folgenden Eigenschaften an:

#Validierung
Text-Align: Mitte;
Grenzstil: Ridge;
Rand: 50px;
Grenzfarbe: RGB (85, 85, 245);
Hintergrundfarbe: RGB (243, 242, 160);

Hier:

• “Textausrichtung"Eigenschaft wird als" festgelegt "Center”Zum Ausrichten des Textes in der Mitte.
• “Grenzstil”Wird verwendet, um den Grenzstil zu bestimmen. Zum Beispiel haben wir das angewendet “Grat”Grenzstil.
• “Rand”Zuweist den Raum an der Außenseite des Elements.
• “Randfarbe”Verwendet, um die farbenfrohe Grenze um das definierte Element anzugeben.
• “HintergrundfarbeGibt die Hintergrundfarbe des Behälters an.

Ausgang

Wir haben gezeigt, wie die HTML5 -Telefonnummer -Validierung mit dem Muster angewendet wird.

Abschluss

Um das HTML5 -Telefonnummer -Validierungsmuster anzuwenden, erstellen Sie zunächst ein Formular, indem Sie die “verwenden"Tag und hinzufügen"Das bezeichnet das Eingabefeld. Danach fügen Sie die "hinzu"”Element zusammen mit dem“Typ" als "TelUnd "Muster" -attribute. Der "MusterDas Attribut gibt das Muster für die Telefonnummer -Validierung an. Dieser Beitrag hat das Verfahren zum Hinzufügen der HTML5 -Telefonnummer -Validierung mit dem Muster gezeigt.