Назад
Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту




Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Примеры шаблонов для использования в input pattern

Выражение Пример Описание
\d или [0-9] Одна цифра от 0 до 9
\D или [^0-9] Любой символ кроме цифры
\s Один пробел
[A-Z] Только заглавная латинская буква
[A-Za-z] Только латинская буква в любом регистре
[А-Яа-яЁё] Только русская буква в любом регистре
[A-Za-zА-Яа-яЁё] Любая буква русского и латинского алфавита
[0-9]{3} Три цифры
[A-Za-z]{6,} Не менее шести латинских букв
[0-9]{,3} Не более трёх цифр
[0-9]{5,10} От пяти до десяти цифр
^[a-zA-Z]+$ Любое слово на латинице
^[А-Яа-яЁё\s]+$ Любое слово на русском включая пробелы
^[ 0-9]+$ Любое число
[0-9]{6} Почтовый индекс
\d+(,\d{2})? Число в формате 2,4 (разделитель запятая)
\d+(\.\d{2})? Число в формате 5.72 (разделитель точка)
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} IP-адрес
[A-z]{2} 2х буквенный код страны
[A-z]{3} 3х буквенный код страны
(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).* Поле пароля: Минимум 8 символов, одна цифра, одна буква в верхнем регистре и одна в нижнем
^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$ цвет в шестнадцатеричном виде, например #3b5998 или #000
[\x1F-\xBF]* в данном поле разрешены все символы кроме кирилицы
[0-9]{10,12} ИНН юридического лица или ИП. Для полной проверки используйте пример
[0-9]{10,12}
ИНН + КПП юридического лица или ИП. Для полной проверки используйте пример
\+7\s?[\(]{0,1}9[0-9]{2}[\)]{0,1}\s?\d{3}[-]{0,1}\d{2}[-]{0,1}\d{2} Номер телефона
(\+7[-_()\s]+|\+7\s?[(]{0,1}[0-9]{3}[)]{0,1}\s?\d{3}[-]{0,1}\d{2}[-]{0,1}\d{2}) Номер телефона или пусто

HTML Проверка номера телефона

<p>Введите телефон в формате +7-xxx-xxx-xx-xx, где вместо x должна быть цифра:</p>
<p><input type="tel" pattern="\+7\-[0-9]{3}\-[0-9]{3}\-[0-9]{2}\-[0-9]{2}"></p>
<p><input type="submit" value="Отправить"></p>

Mask на чистом javascript

Более сложная проверка вводимого номера телефона в input-поле с проверкой и подстановкой дополнительных символов:

<form>
  <label for="online_phone">Телефон:</label>
  <input id="online_phone" name="phone" type="tel" maxlength="50"
         autofocus="autofocus" required="required"
         value="+7(___)___-__-__"
         pattern="\+7\s?[\(]{0,1}9[0-9]{2}[\)]{0,1}\s?\d{3}[-]{0,1}\d{2}[-]{0,1}\d{2}"
         placeholder="+7(___)___-__-__">
</form>
<script type="text/javascript">
  function setCursorPosition(pos, e) {
    e.focus();
    if (e.setSelectionRange) e.setSelectionRange(pos, pos);
    else if (e.createTextRange) {
      var range = e.createTextRange();
      range.collapse(true);
      range.moveEnd("character", pos);
      range.moveStart("character", pos);
      range.select()
    }
  }

  function mask(e) {
    //console.log('mask',e);
    var matrix = this.placeholder,// .defaultValue
        i = 0,
        def = matrix.replace(/\D/g, ""),
        val = this.value.replace(/\D/g, "");
    def.length >= val.length && (val = def);
    matrix = matrix.replace(/[_\d]/g, function(a) {
      return val.charAt(i++) || "_"
    });
    this.value = matrix;
    i = matrix.lastIndexOf(val.substr(-1));
    i < matrix.length && matrix != this.placeholder ? i++ : i = matrix.indexOf("_");
    setCursorPosition(i, this)
  }
  window.addEventListener("DOMContentLoaded", function() {
    var input = document.querySelector("#online_phone");
    input.addEventListener("input", mask, false);
    input.focus();
    setCursorPosition(3, input);
  });
</script>

HTML Проверка даты

<p>Введите дату в формате дд.мм.гггг:</p>
<p><input type="date" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}"></p>
<p><input type="submit" value="Отправить"></p>

Метод checkValidity() может быть выполнен на любом отдельном поле или формы в целом, вернув true или false – соответствует шаблону или нет.


.