Валидация номера телефона на jQuery и регулярных выражениях

Очень часто на сайте необходимо проверить правильность введенных данных посетителем. Например валидация номера телефона при вводе в форму. Посетителям сайтов часто приходится заполнять различные формы на сайте, например при регистрации, оформлении заказа на товар, подписке на новости и рассылки и т.д. Проверка валидности номера телефона, позволит посетителю облегчить ввод данных, а так же подскажет, в каком формате от него требуется ввести номер телефона и не даст ему ошибиться. Также такая проверка поможет владельцу сайта, защититься от спама и избавит от дополнительных затрат времени по разбору номеров и отсеиванию неверно введенных номеров. Т.к. номера телефона, прошедшие валидацию на сайте будут иметь строго определенный формат, согласно шаблону, то это в дальнейшем позволит автоматически обрабатывать базу собранных номеров телефона программными средствами.

Проверка валидности номера телефона выполняется с помощью Javascript. Javascript, может выполнить проверку динамически в реальном времени, т.е. прямо в процессе ввода номера телефона. При динамической валидации, посетитель просто не сможет ошибиться и ввести не правильный номер телефона, т.к. javascript будет следить за процессом ввода каждой цифры. Валидация номера телефона может быть выполнена и после заполнения всей формы и при отправке данных, в этом случае, посетителю будут выведены соответствующие подсказки о допущенных ошибках.

В зависимости от задачи, требования к формату ввода номера телефона могут быть разные, например:
только цифры, 1234567890
с разделением на две или три цифры,
с разделением цифр через тире или пробел,
с ограничением по количеству цифр,
с обязательным кодом города,
только городские или мобильные номера,
только номера определенного оператора.

1. Валидация номера телефона с помощью библиотеки jquery

Преимущество данного вида валидации в том, что посетитель не сможет ошибиться и ввести неправильный номер. Если номер телефона будет введен не полностью, то он не будет принят системой.

Для демонстрации, начните ввод телефона в соответствующие поля:

1234567890
12-34-56
123-45-67
8 (123) 456-78-90
8 (1234) 56-78-90
(1234) 56-78-90
8 (800) 123-45-67
8-800-123-45-67
8 800 123 45 67
+7 123 456-78-90
... другие варианты можно задать самостоятельно с помощью шаблона.

Подключение jQuery

Для работы валидации, используются библиотеки из папки "jquery". Обе библиотеки приложены к этому примеру.

2. Валидация номера телефона с помощью регулярных выражений

В отличии от предыдущих примеров, не требуется библиотека jQuery.
При вводе номера, пользователь может ошибаться, о чем ему будут сообщать подсказки.

Для демонстрации, начните ввод телефона в соответствующие поля:

Телефон не введен

Шаблон допускает телефоны вида:
xxxxxx (не менее 6 и не более 14 цифр),
x xxx xxx xx xx,
x-xxx-xxx-xx-xx,
x (xxx) xxx-xx-xx и другие варианты.

Характеристики скриптов валидации номера телефона

- работают во всех популярных браузерах, включая IE6 и выше.
- используют библиотеку jQuery (входит в архив).
- подключаются к обычным элементам формы input type='text'

СОДЕРЖАНИЕ АРХИВА

- Готовые рабочие примеры проверки на jQuery.html
- Готовые рабочие примеры проверки на регулярных выражениях.html
- Описание скриптов "Валидация телефона на jQuery.doc"
- Описание скриптов "Валидация телефона на регулярных выражений.doc"
- дополнительная документация (RUS, ENG)
- библиотека jquery.