Сегодня у меня заметка совсем под узкий круг читателей. А именно, я расскажу, как правильно записать в html5 pattern телефонного номера.
Что такое pattern вообще? Это своего рода формула, которой вы задаете, как именно пользователь должен заполнить поле. Если он заполняет не так, как указано вами в паттерне, форма не отправится и человеку придется исправить ошибку.
Наверняка вы знаете, что в html5 появилось поле для ввода телефона, но его минус в том, что нет встроенной валидации и туда на самом деле можно вписать все, что душе угодно, в том числе и буквы.
Чтобы исправить это, как раз придется использовать атрибут pattern. Давайте посмотрим, как его прописывать на примере российского номера:
В формате: 7-ххх-ххх-хххх<input type = "tel" name = "tel" placeholder = "Введите номер телефона" pattern = "7-[0-9]{3}-[0-9]{3}-[0-9]{4}">
Больше всего здесь нас должен интересовать этот атрибут. Во-первых, давайте сразу проверим его работу. О placeholder я написал в этой статье.
Теперь видно, что форма не отправляется, если поле заполнено не по требуемому формату. Для удобства пользователей подскажите им этот самый формат. При таком значении формат соблюден и форма успешно отправится:
Ну а теперь подробнее о значении pattern = "7-[0-9]{3}-[0-9]{3}-[0-9]{4}". Семерка вначале означает, что первой цифрой обязательно должна быть 7 и ничто другое. Далее нужно поставить дефис и ввести три цифры от 0 до 9, опять поставить дефис и ввести еще 3 цифры, после чего вновь дефис и последние 4 цифры.
Кстати, в этом варианте если заполнить все без дефисов, то форма посчитает, что вы ввели значение, не соответствующее формату, поэтому их, если что, можете удалить из значения. В таком случае pattern можно существенно сократить:
pattern = "7[0-9]{10}"
Это если совсем без дефисов. В общем, суть, я думаю, вы поняли, и теперь можете составить свою формулу и для проверки правильности ввода любых других телефонных номеров.