HTML <input> pattern-Attribut

HTML <input> Tag

Definition und Verwendung

Muster Das Attribut legt die reguläre Ausdrücke fest, die beim Absenden des Formulars den Wert des <input>-Elements überprüfen.

Beachten Sie:Muster Das Attribut gilt für die folgenden Eingabetypen:

  • text
  • date
  • search
  • url
  • tel
  • email
  • password

Hinweis:Verwenden Sie Globale title-Attribut um das Muster zu beschreiben und den Benutzern zu helfen, es zu verstehen.

Hinweis:Bitte besuchen Sie unsere JavaScript-Anleitung Lernen Sie mehr über reguläre Ausdrücke im Chinesischen.

Beispiel

Beispiel 1

Unten ist ein HTML-Formular mit einem Eingabefeld enthalten, das nur drei Buchstaben enthalten kann (keine Ziffern oder Sonderzeichen):

<form action="/action_page.php">
  <label for="country_code">Landescode:</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="Drei-Buchstaben-Ländercode"><br><br>
  <input type="submit">
</form>

Versuchen Sie es selbst

Beispiel 2

Ein <input>-Element mit dem Attribut "type" gleich "password" muss mindestens 8 Zeichen enthalten:

<form action="/action_page.php">
  <label for="pwd">Passwort:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Acht oder mehr Zeichen">
  <input type="submit">
</form>

Versuchen Sie es selbst

Beispiel 3

Ein <input>-Element mit dem Attribut "type" gleich "password" muss 8 oder mehr Zeichen enthalten, darunter muss eine Zahl, ein Großbuchstabe und ein Kleinbuchstabe sein:

<form action="/action_page.php">
  <label for="pwd">Passwort:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Muss mindestens acht Zeichen enthalten, darunter muss eine Zahl, ein Großbuchstabe und ein Kleinbuchstabe sein">
  <input type="submit">
</form>

Versuchen Sie es selbst

Beispiel 4

Ein <input>-Element mit dem Attribut "type" gleich "email" muss in folgender Reihenfolge sein: characters@characters.domain。

Bestehend aus Zeichen und dem @-Zeichen, gefolgt von weiteren Zeichen, dann einem "."-Zeichen. Nach dem "."-Zeichen müssen mindestens zwei Buchstaben von a bis z hinzugefügt werden:

<form action="/action_page.php">
  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Versuchen Sie es selbst

Beispiel 5

Ein <input>-Element mit dem Attribut "type" gleich "search" darf die folgenden Zeichen nicht enthalten: ' oder " .

<form action="/action_page.php">
  <label for="search">Suche:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="ungültige Eingabe">
  <input type="submit">
</form>

Versuchen Sie es selbst

Beispiel 6

Dies ist ein <input>-Element mit dem Attribut "type" gleich "url", das mit "http://" oder "https://" beginnen muss, gefolgt von mindestens einem Zeichen:

<form action="/action_page.php">
  <label for="website">Homepage:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="Enthält http://">
  <input type="submit">
</form>

Versuchen Sie es selbst

Syntax

<input pattern="regexp">

Attributwert

Wert Beschreibung
regexp Regulärer Ausdruck zur Überprüfung des Wertes des <input>-Elements.

Browserkompatibilität

Die Nummern in der Tabelle geben die erste Version des Browsers an, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 10.0 4.0 10.1 9.6

Anmerkung:Muster Attribute sind neue Attribute in HTML5.

HTML <input> Tag