Beispiel
Ein HTML-Formular mit einem Eingabefeld, das nur drei Buchstaben (keine Zahlen oder Sonderzeichen) enthalten:
<form action="demo_form.asp">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code">
<input type="submit">
</form>
Versuch es selber " Mehr "Versuchen Sie es selbst" Beispiele unten.
Definition und Verwendung
Das pattern Attribut gibt einen regulären Ausdruck , dass das <input> Element der Wert gegenüber wird geprüft.
Hinweis: Das pattern Attribut arbeitet mit den folgenden Eingabetypen: text, date, search, url, tel, email - password text, date, search, url, tel, email und password .
Tipp: Verwenden Sie den globalen title Attribut , das Muster zu beschreiben , um den Benutzer zu helfen.
Tipp: Erfahren Sie mehr über reguläre Ausdrücke in unserem JavaScript - Tutorial.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die das Attribut vollständig unterstützt.
| Attribut | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | Nicht unterstützt | 9.6 |
Unterschiede zwischen HTML 4.01 und HTML5
Das pattern Attribut ist neu in HTML5.
Syntax
<input pattern="regexp">
Werte Attribut
| Wert | Beschreibung |
|---|---|
| regexp | Gibt einen regulären Ausdruck , dass die <input> Element der Wert gegenüber geprüft |
Mehr Beispiele
Beispiel
Ein <input> Element mit type="password" , die 6 oder mehr Zeichen enthalten:
<form action="demo_form.asp">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or
more characters">
<input type="submit">
</form>
Versuch es selber " Beispiel
Ein <input> Element mit type="password" , die acht oder mehr Zeichen enthalten muss , die mindestens eine Zahl und ein Groß- und Kleinbuchstaben sind von:
<form action="demo_form.asp">
Password: <input
type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain
at least one number and one uppercase and lowercase letter, and at least 8
or more characters">
<input type="submit">
</form>
Versuch es selber " Beispiel
Ein <input> Element mit type="email" - type="email" , die in der folgenden Reihenfolge angeordnet sein müssen: Zeichen @ Zeichen. Domain (Zeichen durch ein @ -Zeichen , gefolgt von mehr Zeichen folgen, und dann ein "."
Nach dem "." unterzeichnen Sie nur 2 bis 3 Buchstaben von a bis z schreiben:
<form action="demo_form.asp">
E-mail: <input type="email"
name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<input type="submit">
</form>
Versuch es selber " Beispiel
Ein <input> Element mit type="search" , die nicht die folgenden Zeichen enthalten: ' oder "
<form action="demo_form.asp">
Search: <input
type="search" name="search" pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Versuch es selber " Beispiel
Ein <input> Element mit type="url" , die mit beginnen muss http:// oder https:// durch mindestens ein Zeichen folgt:
<form action="demo_form.asp">
Homepage:
<input type="url" name="website" pattern="https?://.+" title="Include
http://">
<input type="submit">
</form>
Versuch es selber "