От автора: приветствую вас, друзья. В предыдущей статье мы достаточно легко и просто реализовали простейший механизм валидации полей формы, используя типы полей email и url. Однако таким образом мы можем проверить только ограниченный набор форматов данных. Как же быть? Все просто — используем атрибут HTML5 — pfttern. Приступим.
Исходные файлы текущей статьи вы можете скачать по ссылке.
Итак, возьмем код из предыдущего урока. В форме у нас имеется поле для ввода телефона, которое имеет тип tel:
|
1 |
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Телефон" required> |
Но в отличие от полей типа email, к примеру, поле телефона не валидируется браузером и пользователь волен ввести вместо телефона что угодно. В принципе, такое положение вещей вполне закономерно. Браузер не знает, какой формат телефонного номера нам нужен, поскольку форматы могут быть разными.
Как уже отмечалось выше, в такой ситуации нам поможет атрибут pattern. С помощью него мы можем проверить формат не только телефонного номера, но и абсолютно любые данные. Все что нам нужно, чтобы воспользоваться атрибутом, это знание языка регулярных выражений. К слову, познакомиться с регулярными выражениями вы можете в нашем курсе.
Итак, давайте составим шаблон регулярного выражения, который будет пропускать только телефоны, скажем, следующего формата: (XXX) XXX-XX-XX (об этом формате обязательно уведомить пользователя в описании поля).
|
1 |
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Телефон в формате (XXX) XXX-XX-XX" pattern="\(\d{3}\) \d{3}-\d{2}-\d{2}" required> |
И проверим, сработает ли наш шаблон:
Работает! Если ввести строку, не соответствующую заданному шаблону, браузер сообщит об этом. Точно таким же образом мы можем проверять любые данные, поскольку регулярные выражения позволяют очень гибко организовать проверку на соответствие нужному формату данных.
Например, в качестве имени я хочу разрешить только буквы и пробелы, ничего кроме. Это просто:
|
1 |
<input type="text" class="form-control" id="name" name="name" placeholder="Имя" pattern="[a-zA-Zа-яА-ЯёЁ ]+" required> |
Теперь если попробовать ввести в качестве имени что-то, не подходящее формату, получим предупреждение:
Замечательно, не так ли? На этом данную статью можно завершать. Дополнительно по данной теме вы можете посмотреть этот урок. На этом все. Удачи!
