Простой способ маски телефона и pattern input tel
Например, есть форма обратной связи с полем введите номер телефона.
Изначально без маски телефона можно ввести любой номер в любом формате даже с буквами.
Мы сделаем, чтобы ввод телефона строго соответствовал заданной маске.
Простой и эффективный способ это сделать с помощью плагина jquery.
Скачаем плагин с официального сайта jquery.
В поле поиска пишем mask и нажимаем на jQuery Masked Input.
Чтобы посмотреть инструкции работы плагина перейдем на github.
Из архива нам понадобится файл jquery.maskedinput.js.
Положим файл в папку с плагинами проекта libs и подключим новый плагин в файле gulpfile.js в том месте, где все подключенные скрипты упаковываются в один scripts.min.js.
Добавим скрипт, чтобы работала маска.
Для этого откроем инструкцию и для телефона с идентификатором phone скопируем строку в common.js.
Код в common.js.
Валидация форм. Атрибут pattern в HTML5
Дата публикации: 2016-10-05
От автора: приветствую вас, друзья. В предыдущей статье мы достаточно легко и просто реализовали простейший механизм валидации полей формы, используя типы полей email и url. Однако таким образом мы можем проверить только ограниченный набор форматов данных. Как же быть? Все просто — используем атрибут HTML5 — pfttern. Приступим.
Исходные файлы текущей статьи вы можете скачать по ссылке.
Итак, возьмем код из предыдущего урока. В форме у нас имеется поле для ввода телефона, которое имеет тип tel:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Но в отличие от полей типа email, к примеру, поле телефона не валидируется браузером и пользователь волен ввести вместо телефона что угодно. В принципе, такое положение вещей вполне закономерно. Браузер не знает, какой формат телефонного номера нам нужен, поскольку форматы могут быть разными.
Как уже отмечалось выше, в такой ситуации нам поможет атрибут pattern. С помощью него мы можем проверить формат не только телефонного номера, но и абсолютно любые данные. Все что нам нужно, чтобы воспользоваться атрибутом, это знание языка регулярных выражений. К слову, познакомиться с регулярными выражениями вы можете в нашем курсе.
Итак, давайте составим шаблон регулярного выражения, который будет пропускать только телефоны, скажем, следующего формата: (XXX) XXX-XX-XX (об этом формате обязательно уведомить пользователя в описании поля).
HTML5 и его атрибуты для проверки формы
2015-05-22 / Вр:13:29 / просмотров: 22188
В этой статье я хочу рассказать, как можно проверить форму без использования php или javascript. На HTML5 есть возможность указывать, какое поле должно быть обязательным для заполнения, проверить правильность ввода в поле e-mail адрес, телефон, имя и т. д.
Если вы создаете сайты и вам нужно сделать форму обратной связи, то эта статья будет находка:
Итак, если вы не знаете языков программирования php или javascript, чтобы осуществить проверку формы, не беда – HTML5 справится с этим отлично.
К примеру, у нас есть стандартная html форма:
Достаточно прописать атрибут «required» в том поле, которое вы считаете обязательным для заполнения. Для примера, давайте пропишем «required» к полю «email» :
Как видите, поле «email» стало обязательным для заполнения и форма не отправится до тех пор, пока не внесете туда значение.
Заполните и для остальных полей:
В результате, если пользователь, когда будет писать email адрес, не поставит « @ », ему сразу же выскочит ошибка с подсказкой, что в адресе электронной почты должен присутствовать символ « @ ».
Такой фокус можно проделать с полем для сайта, если такое имеется:
формат ввода должен быть таким:
Итак, нужно чтобы пользователь ввел имя русскими буквами. Для этого пропишите в атрибуте «pattern» вот такое выражение:
Объяснение: в квадратных скобках [ ] пишите, какие буквы должны вводиться в поле для имени. В моем примере можно вводить только русские буквы в любом регистре. Если нужно только латинскими, сделайте вот так:
| Выражение | Описание |
| [A-Z] | Только заглавная латинская буква. |
| [A-Za-z] | Только латинская буква в любом регистре. |
| [А-Яа-яЁё] | Только русская буква в любом регистре. |
| [A-Za-zА-Яа-яЁё] | Любая буква русского и латинского алфавита. |
Цифра, что находится в фигурных скобках < >означает число вводимых символов. В моем примере не менее 4-х символов :
| Выражение | Описание |
| [A-Za-z] | Не менее шести латинских букв. |
| [A-Za-z] | Шесть латинских букв. |
| [А-Яа-яЁё] | Не менее шести букв русского и латинского алфавита. |
| [A-Za-zА-Яа-яЁё] | Шесть букв русского и латинского алфавита. |
Если нужно проверить правильность заполнения email почты, пропишите в атрибуте «pattern» вот такое выражение:
Итак, первый проверяемый участок до символа « @ ». В квадратных скобках [] я прописал, какие буквы должны вводиться в поле. В моем примере это латинские буквы, цифры, нижнее подчеркивание, дефис и точка. В фигурных скобках < >я прописал, что символов должно быть не менее одного. То есть, такой номер не пройдет « @ rambler.ru ».
Далее я закрываю проверяемый участок круглой скобкой и прописываю знак « @ ».
На этом проверка правильного заполнения поля email адреса закончилась.
Или скажу так: вот шаблон адреса электронной почты, по которому нужно создать проверочный:
Итак, в итоге поле «email» будет выглядеть вот так:
Для образца телефона:
Для образца телефона:
Итак, в итоге поле «tel» будет выглядеть вот так:
В итоге вот такой получился код формы:
Это еще не все, можно сделать подсказку пользователю, как правильно нужно заполнить поле, если он что-то ввел не так, как вам нужно.
5. Подсказка в случае, если поле было заполнено не правильно.
Если пользователь в поле ввел имя на латыни, например, «Stepa», а вам нужно на русском «Степа», можно написать всплывающую подсказку для пользователя и показать пример, как нужно заполнить.
Вот так это будет выглядеть в коде:
Вот так это будет выглядеть в коде:
В итоге получилась вот такая форма с проверкой на правильное заполнение на HTML5 без использования php или javascript:
Таблица регулярного выражения
| Выражение | Описание |
| \d 4 | Одна цифра от 0 до 9. |
| \D [^0-9] | Любой символ кроме цифры. |
| \s | Пробел. |
| [A-Z] | Только заглавная латинская буква. |
| [A-Za-z] | Только латинская буква в любом регистре. |
| [А-Яа-яЁё] | Только русская буква в любом регистре. |
| [A-Za-zА-Яа-яЁё] | Любая буква русского и латинского алфавита. |
| 9 | Три цифры. |
| [A-Za-z] | Не менее шести латинских букв. |
| 4 | Не более трёх цифр. |
| 7 | От пяти до десяти цифр. |
| ^[a-zA-Z]+$ | Любое слово на латинице. |
| ^[А-Яа-яЁё\s]+$ | Любое слово на русском включая пробелы. |
| ^[ 0-9]+$ | Любое число. |
| 8 | Почтовый индекс. |
| \d+(,\d<2>)? | Число в формате 1,34 (разделитель запятая). |
| \d+(\.\d<2>)? | Число в формате 2.10 (разделитель точка). |
| \d<1,3>\.\d<1,3>\.\d<1,3>\.\d | IP-адрес |
Тему я еще не закрыл, ждите продолжения! Чтобы не пропустить новых статей, подписывайтесь на обновления блога.
Паттерн для номера телефона html
За установку цвета в HTML5 отвечает специальный элемент input с типом color :
Элемент отображает выбранный цвет. А при нажатии на него появляется специальное диалоговое окно для установки цвета:
Значением этого элемента будет числовой шестнадцатеричный код выбранного цвета.
С помощью элемента datalist мы можем задать набор цветов, из который пользователь может выбрать нужный:
Поля для ввода url, email, телефона
Для их настройки мы можем использовать те же атрибуты, что и для обычного текстового поля:
maxlength : максимально допустимое количество символов в поле
pattern : определяет шаблон, которому должен соответствовать вводимый текст
placeholder : устанавливает текст, который по умолчанию отображается в поле
readonly : делает текстовом поле доступным только для чтения
required : указывает, что текстовое поле обязательно должно иметь значение
size : устанавливает ширину поля в видимых символах
value : устанавливает значение по умолчанию для поля
list : устанавливает привязку к элементу datalist со списком возможных значений
Основное преимущество подобных полей ввода перед обычными текстовыми полями состоит в том, что поля ввода для email, url, телефона для проверки ввода используют соответствующий шаблон. Например, если мы введем в какое-либо поле некорректное значение и попробуем отправить форму, то браузер может отобразить нам сообщение о некорректном вводе, а форма не будет отправлена:
Атрибут pattern: HTML5 проверка формы
Дата публикации: 2016-01-08
От автора: в этой статье мы рассмотрим атрибут pattern и как с его помощью проводить валидацию форм, а именно html 5 проверка формы.
Валидация
Валидация форм, как и юзабилити, имеет жизненно важное значение для безопасности сайта. В процессе проверки перед отправкой формы оцениваются значения полей input на корректный формат ввода. К примеру, у нас есть поле input для ввода email’а, в таком случае значением должен выступать правильный адрес почты; адрес должен начинаться с цифры или буквы, затем знак @ и в конце доменное имя.
Спецификация HTML5 упростила процесс проверки формы, представив новые типы поля input: email, url и tel. Данные значения обеспечивают автоматическую валидацию. При любом несовпадении формата ввода данные input’ы будут выдавать ошибку, предотвращая отправку формы.
Однако ожидать полной обработки всех возможных сценариев с полем input непрактично. Скажем, у вас есть поля для имени пользователя, почтового индекса или другие специализированные типы данных, не входящих в спецификацию? Как проводить проверку этих полей? Вот тут нам и поможет атрибут pattern.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Применение атрибута pattern
Атрибут pattern применим только к полям input. С его помощью можно задавать наши собственные правила валидации значения поля input при помощи Регулярных Выражений (RegEx). И еще раз – если значение не совпадает с заданным шаблоном, то выскачет ошибка.
К примеру, у нас есть поле имени пользователя в форме. Стандартизированного типа для поля имени пользователя не существует, значит, мы воспользуемся обычным типом text:
