Regexp для номера телефона в виде (ххх) ххх-хх-хх

Недавно парился с регулярными выражениями для проверки номера телефона. Номер, соответственно, проверялся для Украины, для России изменения сильно отличатся не будут. Результатом хотел бы поделится. :)

Итак, HTML5 даёт нам отличный атрибут pattern для тэга <input>. Мне нужно было провести проверку соответсвие телефона формату (050) 121-12-12. Покажу сразу что получилось в итоге, а затем объясню каждую часть.

<input type=»tel» pattern=»\([0-9]{3}\)\s[0-9]{3}-[0-9]{2}-[0-9]{2}» name=»phone» placeholder=»(050) 121-34-57″ title=»Формат ввода (050) 121-34-57″ required/>

  •  type=»tel» — это атрибут из HTML5, специально для номеров телефонов.
  • pattern — это, собственно, регулярное выражение, по которому происходит проверка. Детально разберу в конце статьи.
  • name — идентификатор поля для последующей обработки.
  • placeholder — замещающий текст.
  • title — то, что у нас будет выводиться при наведении указателя мыши на поле формы и текст, который будет показываться в случае неправильного заполнения.
  • required — означает что поле обязательно к заполнению.

Подробнее остановимся на паттерне.

  • \([0-9]{3}\) — экранировали скобки и указали, что в них могут быть 3 цифры от 0 до 9.
  • \s — пробел
  • [0-9]{3} — три цифры после пробела
  • -[0-9]{2}-[0-9]{2} — два блока цифр, перед которыми должен стоять «-«.

Уточнение: всё это счастье пока работает не во всех браузерах, в частности, в IE9 и Safari это всё бесполезно. Но если у вас Windows 8 Developer Preview с Internet Explorer Platform Preview 3 — то там это всё работает. И, напоследок, примеры срабатывания регулярного выражения в разных браузерах:

Chrome pattern

Chrome

Firefox

Opera

IE10 Platform Preview

Кстати, если вам нужен аналог фотошоп онлайн — рекомендую пользоваться сервисом от ivanbl4.ru

Постоянный адрес статьи Пинги запрещены.

  • Sergey Nazgulov

    Атрибут действительно небезинтересный — будем знать, а если будем знать — значит будем юзать :) Автор статьи — молодец, способ подачи информации заслуживает всяческих похвал. Like.