Przykład
Formularz HTML z pola wprowadzania danych, które mogą zawierać tylko trzy litery (bez cyfry lub znaki specjalne):
<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>
Spróbuj sam " Więcej "Try it yourself" przykłady poniżej.
Definicja i Wykorzystanie
pattern atrybut określa wyrażenie regularne, że <input> Wartość elementu jest porównywane.
Uwaga: pattern atrybutem współpracuje z następującymi typami wejściowe: text, date, search, url, tel, email i password .
Wskazówka: Użyj globalnego title atrybut opisać wzór, aby pomóc użytkownikowi.
Wskazówka: Więcej informacji na temat wyrażeń regularnych w naszym poradniku JavaScript.
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje atrybut.
| Atrybut | |||||
|---|---|---|---|---|---|
| pattern | 5,0 | 10,0 | 4,0 | Nieobsługiwany | 9,6 |
Różnice między HTML 4.01 i HTML5
pattern atrybutem jest nowego w HTML5.
Składnia
<input pattern="regexp">
wartości atrybutów
| Wartość | Opis |
|---|---|
| regexp | Określa wyrażenie regularne, że <input> Wartość elementu jest porównywane |
Więcej przykładów
Przykład
<input> element o type="password" , który musi zawierać 6 lub więcej znaków:
<form action="demo_form.asp">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or
more characters">
<input type="submit">
</form>
Spróbuj sam " Przykład
<input> element o type="password" , który musi zawierać 8 lub więcej znaków, które mają co najmniej jeden numer, a jedno wielkie i małe litery:
<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>
Spróbuj sam " Przykład
<input> element o type="email" , które muszą znajdować się w następującej kolejności: znaki @ znaków. Domeny (znaki po których następuje znak @, a następnie więcej znaków, a następnie "."
Po "." podpisać, można napisać tylko 2 do 3 litery od A do Z:
<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>
Spróbuj sam " Przykład
<input> element o type="search" , która nie może zawierać następujących znaków: ' lub "
<form action="demo_form.asp">
Search: <input
type="search" name="search" pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Spróbuj sam " Przykład
<input> element o type="url" , które musi zaczynać się od http:// lub https:// , a następnie co najmniej jeden znak:
<form action="demo_form.asp">
Homepage:
<input type="url" name="website" pattern="https?://.+" title="Include
http://">
<input type="submit">
</form>
Spróbuj sam "