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




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



PHP Поиск



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

Примеры шаблонов для использования в 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
\+7\s?[\(]{0,1}9[0-9]{2}[\)]{0,1}\s?\d{3}[-]{0,1}\d{2}[-]{0,1}\d{2} Номер телефона

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="<?=(isset($_POST['phone'])?$_POST['phone']:'+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 - соответствует шаблону или нет.


.

Популярное:


Содержание:


Новое за неделю



Сейчас на сайте: 1974
Rambler's Top100