Längenvalidierung in HTML festlegen

1. Verwenden Sie das Attribut pattern, um die Längenvalidierung in HTML festzulegen
2. Verwenden Sie das Attribut minlength, um die Mindestlängenvalidierung in HTML festzulegen

In diesem Artikel werden zwei Methoden zum Festlegen der Längenvalidierung in HTML-Formularen vorgestellt. Darüber hinaus werden wir die Validierung der minimalen und maximalen Länge besprechen.

Verwenden Sie das Attribut pattern, um die Längenvalidierung in HTML festzulegen

Das Attribut pattern definiert einen regulären Ausdruck im input-Tag in HTML. Es prüft den Eingabewert im Formular und führt eine Validierung durch.

Als Wert des Attributs pattern können wir den regulären Ausdruck angeben. Wir können das Attribut pattern mit den Eingabetypen wie Text, E-Mail, Passwort, Tel, URL, Datum und Suche verwenden.

Wir können auch das title-Attribut im input-Tag verwenden, um die Validierungsregel zu verstehen. Wir können das Regex-Muster für die minimale und maximale Länge angeben.

Erstellen Sie beispielsweise ein Formular und schreiben Sie ein input-Tag mit dem type-Passwort darin.

Als nächstes verwenden Sie das Attribut pattern, um das Regex-Muster .{8,} zu schreiben. Schreiben Sie dann den Text mindestens acht Zeichen erforderlich in das Attribut title.

Schreiben Sie zum Schluss das Attribut required in das Tag und erstellen Sie einen Senden-Button.

Hier haben wir eine Regex erstellt, bei der die Mindestlänge der Eingabe acht beträgt. Wenn wir versuchen, das Formular mit einer Länge von weniger als acht Zeichen zu senden, wird das Formular nicht gesendet.

Die Nachricht im Attribut title wird in einem solchen Zustand angezeigt. Die . in der Regex bezeichnet alle Zeichen außer der neuen Zeile. Wir können nach dem Komma eine weitere Zahl hinzufügen, um die maximale Länge festzulegen.

Das Attribut erforderlich verhindert, dass das Formular gesendet wird, wenn kein Wert angegeben wird. Daher können wir die Längenvalidierung in HTML mit dem Attribut pattern festlegen.

Beispielcode:

<form action="#">
    Password<input type="password" pattern=".{8,}" title="minimum eight characters needed" required>
    <input type="submit">
</form>

Verwenden Sie das Attribut minlength, um die Mindestlängenvalidierung in HTML festzulegen

HTML bietet ein Attribut namens minlength, um die Validierung der Mindestlänge im Feld input festzulegen. Es funktioniert in allen Eingabetypen, ebenso wie das Attribut pattern.

Erstellen Sie beispielsweise ein Formular und anschließend ein Eingabefeld für ein Passwort. Schreiben Sie dann das Attribut minlength in das Tag input, setzen Sie den Wert des Attributs auf 8 und erstellen Sie zum Schluss einen Submit-Button.

Hier funktioniert die Längenvalidierung genauso wie bei der ersten Methode. Wenn wir einen Wert von weniger als acht Zeichen eingeben, wird das Formular nicht gesendet.

Wir können auch die Eigenschaft maxlength verwenden, um die maximale Länge festzulegen. Daher können wir das Attribut minlength verwenden, um die Mindestlängenvalidierung in HTML festzulegen.

Beispielcode:

<form action="#">
    Password
    <input type="password" minlength="8">
    <input type="submit">
</form>