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

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

Наш Telegram бот: @htmlweb_bot

Примеры шаблонов для html5 form input pattern

Примеры шаблонов для использования в input pattern. Здесь описание проверки корректности полей на js.

Выражение	Пример	Описание
\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}	ИНН: КПП:	ИНН + КПП юридического лица или ИП. Для полной проверки используйте пример
[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$		E-mail
\+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})		Номер телефона или пусто
([\+][7-8]{1}\s?[$]9[0-9]{2}[$]\s?\d{3}[-]\d{2}[-]*\d{2})		Номер телефона номера телефона в формате +7903... и 8903...

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

<!DOCTYPE html>
<html>
<head>
    <title>Атрибут pattern для проверки номера телефона на javascript</title>
</head>
<body>
<form>
    <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>
</form>
</body>
</html>

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 Проверка даты

<!DOCTYPE html>
<html>
<head>
    <title>Атрибут pattern для проверки даты на javascript</title>
</head>
<body>
<form>
    <p>Введите дату в формате дд.мм.гггг:</p>
    <p><input type="date" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}"></p>
    <p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>

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

.
Прокомментировать/Отблагодарить