Html шаблон номера телефона

Паттерн номер телефона HTML+input mask js

Иногда нам приходится проверять правильность ввода номера телефона по конкретному шаблону. Здесь Вы найдете этот шаблон для HTML, а также input mask с примерами для HTML+JS.

Сам шаблон (pattern) для html выглядит так:

 \(\d\) \d-\d-\d$" minlength="19" name="login" placeholder="Номер телефона" required="">

• autocorrect=»off» — отключаем проверку орфографии для телефонов/планшетов при вводе
• autocapitalize=»off» — отменяет ввод заглавных букв для тел/планш.
• pattern=»^\+\d \(\d\) \d-\d-\d$» — сам шаблон ввода
• minlength=»19″ — минимальное количество символов при вводе
• name=»login» — имя поля
• class=»form-control» — класс
• id=»login» — идентификатор
• placeholder=»Номер телефона» — подсказка
• required=»» — поле обязательно для заполнения

Данный шаблон будет пропускать только номера, которые имеют формат:

+38 (000) 000-00-00
+79 (000) 000-00-00

Подключаем input mask jQuery документация

Для задействования добавьте:

Или активируйте данную функцию с помощью jQuery:

Можно также подключить проверку validator.js

Создать вот такую вот форму:

  
 
Номер телефона \(\d\) \d-\d-\d$" minlength="19" placeholder="Номер телефона" required>
 Отправить 

Источник

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

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

 
Телефон: 99[\)]\s?\d[-]\d[-]\d" placeholder="+7(___)___-__-__">
  

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

Введите дату в формате дд.мм.гггг:
 
\.5\.3">
 

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

Источник

Значение tel

Тип tel (от англ. » tel ephone» ‒ «телефон») создаёт поле ввода телефонного номера.

Внешний вид

• ‒ телефонное поле;
• ‒ наведение курсора;
• ‒ фокус.

Примечание

HTML спецификация не устанавливает определённый синтаксис телефонного номера для данного поля (в отличие от « url » и « email » полей). Это сделано намеренно, так как на практике, поля телефонных номеров, как правило, имеют свободную форму, потому что существует большое разнообразие допустимых телефонных номеров. (Установить необходимый синтаксис телефонного номера можно с помощью атрибута « pattern ».)

Поддержка браузерами

Спецификация

Сопутствующие атрибуты

autocomplete Автозаполнение значения поля телефона. autofocus Автоматческая фокусировка на телефонном поле после полной загрузки страницы. disabled Блокировка поля телефона.

disabled=»disabled»

form Присоединение телефонного поле к форме. list Создание списка рекомендованных вариантов телефонных номеров.

maxlength Задаёт максимально-допустимое количество вводимых символов. minlength Задаёт минимально-допустимое количество вводимых символов. name Присваивает имя телефонному полю. pattern Устанавливает критерий/шаблон ввода. placeholder Указывает текст-подсказку для пустого поля.

placeholder=»Текст-подсказка»

readonly Указывает, что поле телефона доступно только для чтения (изменение/редактирование запрещено). required Указывает, что поле телефона обязательно для заполнения. size Задаёт ширину телефонного поля по количеству вводимых символов.

size=»10″

value Указывает значение телефонного поля (отправляется на сервер или используется скриптами).

Примечание: Данный атрибут должен иметь значение, которое не содержит символов «LF» ПЕРЕВОД СТРОКИ [ U+000A ] или «CR» ВОЗВРАТ КАРЕТКИ [ U+000D ].

value=»+7 (900) 123-45-67″

Источник