Атрибут pattern элемента HTML <input>

HTML <input> тег

Определение и использование

pattern Атрибут определяет регулярное выражение, которое проверяет значение элемента <input> при отправке формы.

Обратите внимание:pattern Атрибут applies к следующим типам ввода:

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

Совет:Используйте Глобальный атрибут title описать этот шаблон, чтобы помочь пользователям понять.

Совет:Пожалуйста, в нашем Уроки JavaScript Узнайте больше о регулярных выражениях на нашем курсе.

Пример

Пример 1

Ниже приведена HTML-форма с одним полем ввода, которое может содержать только три буквы (не может содержать цифры или специальные символы):

<form action="/action_page.php">
  <label for="country_code">Код страны：</label>
  <input type="text" id="country_code" name="country_code"}
  pattern="[A-Za-z]{3}" title="Трехбуквенный код страны"><br><br>
  <input type="submit">
</form>

Попробуйте сами

Пример 2

Ниже приведен элемент <input> с атрибутом type равным "password", который должен содержать не менее 8 символов:

<form action="/action_page.php">
  <label for="pwd">Пароль：</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Восемь или больше символов">
  <input type="submit">
</form>

Попробуйте сами

Пример 3

Ниже приведен элемент <input> с атрибутом type равным "password", который должен содержать 8 символов или больше, среди которых должна быть至少 одна цифра, одна большая и одна маленькая буква:

<form action="/action_page.php">
  <label for="pwd">Пароль：</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Необходимо включить至少 восемь символов, среди которых должна быть至少 одна цифра, одна большая и одна маленькая буква">
  <input type="submit">
</form>

Попробуйте сами

Пример 4

Ниже приведен элемент <input> с атрибутом type равным "email", который должен соответствовать следующему порядку: characters@characters.domain.

Состоит из символов и знака @, за которым следуют дополнительные символы, а затем символ ".". За символом "." необходимо добавить по крайней мере две буквы из а до з:

<form action="/action_page.php">
  <label for="email">Электронная почта：</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Попробуйте сами

Пример 5

Ниже приведен элемент <input> с атрибутом type равным "search", который не может содержать следующие символы: ' или " .

<form action="/action_page.php">
  <label for="search">Search:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Некорректный ввод">
  <input type="submit">
</form>

Попробуйте сами

Пример 6

Ниже приведен элемент <input> с атрибутом type равным "url", который должен начинаться с http:// или https://, за которыми следует по крайней мере один символ:

<form action="/action_page.php">
  <label for="website">Домашняя страница:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="Содержит http://">
  <input type="submit">
</form>

Попробуйте сами

Синтаксис

<input pattern="regexp">

Значение атрибута

Значение Описание
regexp Определяет регулярное выражение для проверки значения элемента <input>.

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

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

Комментарий:pattern Атрибут - новый атрибут в HTML5.

HTML <input> тег