Атрибут pattern

В атрибуте pattern пишется регулярное выражение, которому должно соответствовать введённое в <input> значение.

В этом примере браузер проверит перед отправкой формы, что пароль не меньше 6 символов в длину:

        
          
          <form>  <input type="password" pattern=".{6,}">  <button>Отправить</button><form>
          <form>
  <input type="password" pattern=".{6,}">
  <button>Отправить</button>
<form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Атрибут pattern можно применить только к тегам <input> и только со следующими значениями атрибута type:

• text;
• tel;
• email;
• url;
• password;
• search.

Значением должно быть регулярное выражение, по которому браузер перед отправкой формы будет проверять то, что введено в поле. Шаблон будет неявно заключён в скобки ^(?: и )$, так что совпадение проверяется со всем указанным регулярным выражением, т. е. ^(?:<шаблон>)$.

Проверка происходит только при отправке формы. Если при отправке формы значение поля не соответствует регулярному выражению, браузер покажет всплывающее сообщение с ошибкой.

При помощи атрибута title можно добавить сообщение о требованиях шаблона. Этот текст будет показан в виде подсказки при наведении на поле и будет выведен вместе с ошибкой при проверке. В примере ниже в подсказке будет написано «Минимум 6 символов».

        
          
          <label>  Пароль:  <input type="password" pattern=".{6,}" title="Минимум 6 символов"></label>
          <label>
  Пароль:
  <input type="password" pattern=".{6,}" title="Минимум 6 символов">
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет, что пользователь ввёл хотя бы одну цифру.

        
          
          <label>  Введите только цифры:  <input type="text" pattern="\d+" title="Только цифры" required></label>
          <label>
  Введите только цифры:
  <input type="text" pattern="\d+" title="Только цифры" required>
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет, что пользователь ввёл текст на кириллице с большой буквы (разрешён дефис для двойных имён).

        
          
          <label>  Введите имя:  <input    type="text"    pattern="[А-ЯЁ][а-яё]+(-[А-ЯЁ][а-яё]+)?"    title="Введите имя с большой буквы"    required  ></label>
          <label>
  Введите имя:
  <input
    type="text"
    pattern="[А-ЯЁ][а-яё]+(-[А-ЯЁ][а-яё]+)?"
    title="Введите имя с большой буквы"
    required
  >
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет, что пользователь ввёл логин от 3 до 20 символов, состоящий из латинских букв (строчных или прописных), цифр, знака подчёркивания или дефиса.

        
          
          <label>  Введите логин:  <input    type="text"    pattern="[a-zA-Z0-9_\-]{3,20}"    title="От 3 до 20 символов, разрешены латинские буквы, цифры, -, _"    required  ></label>
          <label>
  Введите логин:
  <input
    type="text"
    pattern="[a-zA-Z0-9_\-]{3,20}"
    title="От 3 до 20 символов, разрешены латинские буквы, цифры, -, _"
    required
  >
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет:

• (?=.*\d) — наличие хотя бы одной цифры;
• (?=.*[a-z]) — наличие хотя бы одной строчной буквы;
• (?=.*[A-Z]) — наличие хотя бы одной заглавной буквы;
• .{8,} — минимум 8 символов.

        
          
          <label>  Введите пароль:  <input    type="password"    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"    title="Минимум 8 символов, хотя бы одна цифра, одна строчная и одна заглавная буква"    required  ></label>
          <label>
  Введите пароль:
  <input
    type="password"
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
    title="Минимум 8 символов, хотя бы одна цифра, одна строчная и одна заглавная буква"
    required
  >
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет:

• (?=.*\d) — наличие хотя бы одной цифры;
• (?=.*[a-z]) — наличие хотя бы одной строчной буквы;
• (?=.*[A-Z]) — наличие хотя бы одной заглавной буквы;
• (?=.*[!@#$%^&*]) — наличие разрешёных спецсимволов;
• .{8,} — минимум 8 символов.

        
          
          <label>  Введите пароль:  <input    type="password"    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}"    title="Минимум 8 символов, хотя бы одна цифра, одна строчная, одна заглавная буква и спецсимвол"    required  ></label>
          <label>
  Введите пароль:
  <input
    type="password"
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}"
    title="Минимум 8 символов, хотя бы одна цифра, одна строчная, одна заглавная буква и спецсимвол"
    required
  >
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет, что:

• \+ — есть обязательный знак "+";
• \d{8,15} — в номере от 8 до 15 цифр (без пробелов, дефисов и скобок).

        
          
          <label>  Введите номер телефона:  <input    type="tel"    pattern="\+\d{8,15}"    title="Номер должен начинаться с + и содержать о 8 до 15 цифр"    required  ></label>
          <label>
  Введите номер телефона:
  <input
    type="tel"
    pattern="\+\d{8,15}"
    title="Номер должен начинаться с + и содержать о 8 до 15 цифр"
    required
  >
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет, что:

• (\+7|8) — номер должен начинаться с +7 или 8;
• [\(\s]? — может быть пробел или открывающая скобка (или ничего);
• \d{3} — ровно 3 цифры кода оператора;
• [\)\s]? — может быть пробел или закрывающая скобка (или ничего);
• \d{3}[\-\s]?\d{2}[\-\s]?\d{2} — 7 цифр с возможным пробелом или дефисом между ними.

        
          
          <label>  Введите номер телефона:  <input    type="tel"    pattern="(\+7|8)[\(\s]?\d{3}[\)\s]?\d{3}[\-\s]?\d{2}[\-\s]?\d{2}"    title="Номер должен начинаться на +7 или 8, содержать 11 цифр, может содержать скобки, пробелы и дефисы"    required  ></label>
          <label>
  Введите номер телефона:
  <input
    type="tel"
    pattern="(\+7|8)[\(\s]?\d{3}[\)\s]?\d{3}[\-\s]?\d{2}[\-\s]?\d{2}"
    title="Номер должен начинаться на +7 или 8, содержать 11 цифр, может содержать скобки, пробелы и дефисы"
    required
  >
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет, что:

• [a-zA-Z0-9_%+.\-]+ — перед @ есть буквы, цифры или спецсимволы ., _, %, +, -;
• [a-zA-Z0-9]+[a-zA-Z0-9\-]* — между @ и доменом есть хотя бы одна буква, цифра или -, причём первым знаком может быть только буква или цифра;
• [a-zA-Z]{2,4} — домен содержит от 2 до 4 букв.

        
          
          <label>  Введите email:  <input    type="text"    pattern="[a-zA-Z0-9_%+.\-]+@[a-zA-Z0-9]+[a-zA-Z0-9\-]*\.[a-zA-Z]{2,4}"    title="До @ разрешены буквы, цифры и спецсимволы ., _, %, +, -, домен от 2 до 4 букв"    required  ></label>
          <label>
  Введите email:
  <input
    type="text"
    pattern="[a-zA-Z0-9_%+.\-]+@[a-zA-Z0-9]+[a-zA-Z0-9\-]*\.[a-zA-Z]{2,4}"
    title="До @ разрешены буквы, цифры и спецсимволы ., _, %, +, -, домен от 2 до 4 букв"
    required
  >
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет что каждое число находится в диапазоне от 0 до 255.

Диапазон чисел проверяет группа (25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d):

• 25[0-5] — числа от 250 до 255;
• 2[0-4]\d — числа от 200 до 249;
• 1\d{2} — числа от 100 до 199;
• [1-9]?\d — числа от 0 до 99 (ноль или одна цифра 1-9, затем любая цифра);

        
          
          <label>  Введите IP-адрес:  <input    type="text"    pattern="(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)){3}"    title="Каждое число должно находиться в диапазоне от 0 до 255"    required  ></label>
          <label>
  Введите IP-адрес:
  <input
    type="text"
    pattern="(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)){3}"
    title="Каждое число должно находиться в диапазоне от 0 до 255"
    required
  >
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет, что:

• https?:// — адрес начинается с http:// или https://;
• [a-zA-Z0-9]+[a-zA-Z0-9.\-]* — адрес содержит имя домена, первый символ буква или цифра, остальные символы могут содержать буквы, цифры, точки и дефис;
• \. — обязательная точка перед доменной зоной;
• [a-zA-Z]{2,} — доменная зона от 2 букв.

        
          
          <label>  Введите url:  <input    type="text"    pattern="https?://[a-zA-Z0-9]+[a-zA-Z0-9.\-]*\.[a-zA-Z]{2,}"    title="Адрес должен начинаться с http:// или https:// и содержать домен"    required  ></label>
          <label>
  Введите url:
  <input
    type="text"
    pattern="https?://[a-zA-Z0-9]+[a-zA-Z0-9.\-]*\.[a-zA-Z]{2,}"
    title="Адрес должен начинаться с http:// или https:// и содержать домен"
    required
  >
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет:

• (0[1-9]|[12][0-9]|3[01]) — число дня месяца от 01 до 31;
• (0[1-9]|1[0-2]) — номер месяца от 01 до 12;
• (19|20)[0-9]{2} — год 1900-1999 или 2000-2099;
• \. — экранированная точка (обязательный разделитель).

        
          
          <label>  Введите дату:  <input    type="text"    pattern="(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[0-2])\.(19|20)[0-9]{2}"    title="Введите дату в формате ДД.ММ.ГГГГ"    required  ></label>
          <label>
  Введите дату:
  <input
    type="text"
    pattern="(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[0-2])\.(19|20)[0-9]{2}"
    title="Введите дату в формате ДД.ММ.ГГГГ"
    required
  >
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этот шаблон проверяет:

• # — обязательный символ решётки в начале;
• ([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}) — либо ровно 6 символов, либо ровно 3 символа из допустимого набора.

        
          
          <label>  Введите hex-цвет:  <input    type="text"    pattern="#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})"    title="Введите цвет в формате #RGB или #RRGGBB"    required  ></label>
          <label>
  Введите hex-цвет:
  <input
    type="text"
    pattern="#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})"
    title="Введите цвет в формате #RGB или #RRGGBB"
    required
  >
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На практике

Скопировать ссылку "На практике" Скопировано

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Лучше не писать слишком строгие паттерны для проверки значений. Вы никогда не сможете предугадать все возможные сценарии. Например, на многих сайтах формы настроены так, что я не могу ввести своё имя через Ё. В регулярном выражении не прописано, что это допустимый символ. Проверяйте только то, что действительно необходимо. К примеру, для валидации имейла достаточно проверить, что в тексте есть символ @.