Właściwość pattern elementu <input> w HTML

Tag HTML <input>

Definicja i zastosowanie

pattern Właściwość określa wyrażenie regularne, które jest sprawdzane w wartości elementu <input> podczas wysyłania formularza.

Uwaga:pattern Właściwość ta dotyczy następujących typów wejściowych:

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

Wskazówka:Użyj Globalna właściwość title Opisz ten wzorzec, aby pomóc użytkownikom zrozumieć.

Wskazówka:Proszę, odwiedź nasz Kurs JavaScript Dowiedz się więcej o wyrażeniach regularnych w naszych kursach.

Przykład

Przykład 1

Poniżej znajduje się formularz HTML zawierający pole wejściowe, które może zawierać tylko trzy litery (nie może zawierać cyfr ani znaków specjalnych):

<form action="/action_page.php">
  <label for="country_code">Kod państwa:</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="Trzyliterowy kod kraju"><br><br>
  <input type="submit">
</form>

Spróbuj sam

Przykład 2

Poniżej znajduje się element <input> o atrybucie type równym "password", który musi zawierać co najmniej 8 znaków:

<form action="/action_page.php">
  <label for="pwd">Hasło:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Osiem lub więcej znaków">
  <input type="submit">
</form>

Spróbuj sam

Przykład 3

Element <input> o atrybucie type równym "password" musi zawierać 8 lub więcej znaków, w tym co najmniej jedną cyfrę, dużą literę i małą literę:

<form action="/action_page.php">
  <label for="pwd">Hasło:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Musisz wprowadzić co najmniej osiem znaków, w tym jedną cyfrę, dużą literę i małą literę">
  <input type="submit">
</form>

Spróbuj sam

Przykład 4

Poniżej znajduje się element <input> o atrybucie type równym "email", który musi być ułożony w następującej kolejności: characters@characters.domain。

Składa się z znaków i znaku @, po którym następują więcej znaków, a następnie znak ".". Po znaku "." należy dodać co najmniej dwa litery z zakresu a do z:

<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>

Spróbuj sam

Przykład 5

Element <input> o atrybucie type równym "search" nie może zawierać następujących znaków: ' lub " .

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

Spróbuj sam

Przykład 6

Poniżej znajduje się element <input> o atrybucie type równym "url", który musi zaczynać się od http:// lub https://, po którym musi występować co najmniej jeden znak:

<form action="/action_page.php">
  <label for="website">Strona główna:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="Zawiera http://">
  <input type="submit">
</form>

Spróbuj sam

Gramatyka

<input pattern="regexp">

Wartość atrybutu

Wartość Opis
regexp Definiuje regularne wyrażenie, które sprawdza wartość elementu <input>.

Obsługa przeglądarek

Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.

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

Komentarz:pattern Atrybut jest nowym atrybutem w HTML5.

Tag HTML <input>