Как правильно ввести в html5 pattern телефонного номера?

Сегодня у меня заметка совсем под узкий круг читателей. А именно, я расскажу, как правильно записать в 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 в работе
Теперь видно, что форма не отправляется, если поле заполнено не по требуемому формату. Для удобства пользователей подскажите им этот самый формат. При таком значении формат соблюден и форма успешно отправится:
правильно введено
Ну а теперь подробнее о значении pattern = "7-[0-9]{3}-[0-9]{3}-[0-9]{4}". Семерка вначале означает, что первой цифрой обязательно должна быть 7 и ничто другое. Далее нужно поставить дефис и ввести три цифры от 0 до 9, опять поставить дефис и ввести еще 3 цифры, после чего вновь дефис и последние 4 цифры.

Кстати, в этом варианте если заполнить все без дефисов, то форма посчитает, что вы ввели значение, не соответствующее формату, поэтому их, если что, можете удалить из значения. В таком случае pattern можно существенно сократить:
pattern = "7[0-9]{10}"

Это если совсем без дефисов. В общем, суть, я думаю, вы поняли, и теперь можете составить свою формулу и для проверки правильности ввода любых других телефонных номеров.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: