Atrybut wzorca HTML <input>
Przykład
Formularz HTML z polem wejściowym, które może zawierać tylko trzy litery (bez cyfr i znaków specjalnych):
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input
type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code"><br><br>
<input type="submit">
</form>
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
patternAtrybut określa wyrażenie regularne, z którym sprawdzana
<input>jest wartość elementu podczas przesyłania formularza.
Uwaga: Atrybut patterndziała z następującymi typami danych wejściowych: tekst, data, wyszukiwanie, adres URL, tel, e-mail i hasło.
Wskazówka: użyj titleatrybutu global, aby opisać wzorzec, aby pomóc użytkownikowi.
Wskazówka: Dowiedz się więcej o wyrażeniach regularnych w naszym samouczku JavaScript.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Składnia
<input pattern="regexp">
Wartości atrybutów
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
Więcej przykładów
Przykład
Element <input> z type="password", który musi zawierać 8 lub więcej znaków:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd"
name="pwd"
pattern=".{8,}" title="Eight or more characters">
<input type="submit">
</form>
Przykład
Element <input> z type="password", który musi zawierać 8 lub więcej znaków składających się z co najmniej jednej cyfry oraz jednej dużej i małej litery:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
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>
Przykład
Element <input> z type="email", który musi być w następującej kolejności: znaki @ znaki . domena (znaki, po których następuje znak @, po których następuje więcej znaków, a następnie „.”
Po "." znak, dodaj co najmniej 2 litery od a do z:
<form action="/action_page.php">
<label
for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit">
</form>
Przykład
Element <input> z type="search", który NIE MOŻE zawierać następujących znaków: ' lub "
<form action="/action_page.php">
<label
for="search">Search:</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Przykład
Element <input> z type="url", który musi zaczynać się od http:// lub https://, po którym następuje co najmniej jeden znak:
<form action="/action_page.php">
<label
for="website">Homepage:</label>
<input type="url" id="website"
name="website"
pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
❮ Znacznik HTML <input>