Html регулярка для телефона

Проверка адреса email и номера телефона на javascript

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

Информация лучше воспринимается на примерах, поэтому посмотрим готовую форму в действии:

Пожалуйста, заполните все поля формы!

Для начала разберем применяемые регулярные выражения, а полный код формы и javascript функций я приведу в конце статьи.

Валидность адреса электронной почты

• Название (test) — один или много символов;
• Знак собаки (@);
• Доменное имя почтового сервера (mail) — один или много символов;
• Точка (.);
• Доменное имя первого уровня (ru) от двух до пяти букв.

Составим регулярное выражение для наших требований:

Разберём правило по частям:

1. Регулярное выражение должно открываться и закрываться символами «/» . После закрывающегося символа можно указать директиву. В нашем случае такой директивной является «i» , которая отключает проверку вводимых букв на регистр. То есть, становится не важно, ввели «test@mail.ru» или «Test@Mail.RU».
2. Знаки «^» и «$» обозначают начало и конец проверяемой строки. Если их убрать, то правило вернет положительный результат даже если в начале или конце электронного адреса поставить запрещенные знаки. То есть, при вводе «%:&test@mail.ru#6&» функция проверки вернет положительный результат, так как в строке имеется последовательность символов, удовлетворяющая нашему правилу. Для исключения такой возможности указываем, что правило должно применяться ко всей строке, а не к её части.
3. Блок «[\w-\.]+» отвечает за проверку названия ящика. В квадратных скобках указываем разрешенные символы: «\w» — все латинские буквы, цифры и знак подчеркивания. Так же рекомендую добавлять знак тире и точку «-\.» . «+» после квадратных скобок указывает на возможность повторения символов — один или много раз.
4. Далее идет знак собаки и доменное имя почтового сервера — «@[\w-]+» . Здесь практически тоже самое что и в предыдущем блоке. Исключаем только из набора символов точку.
5. Осталось прописать правило для проверки наличия точки и корректности доменного имени верхнего уровня (ru,com,info). «\.[a-z]» . Для обозначения знака точки мы указываем её с обратным слешем «\.» Без него она будет восприниматься зарезервированным символом регулярки, который обозначает возможность наличия на её месте любого символа. За точкой должно следовать доменное имя верхнего уровня. Это минимум 2 латинские буквы — «[a-z]» .

Разобранный пример немного упрощен для лучшего восприятия. У него есть недостаток — первым знаком в email не может быть тире или точка, но приведенное регулярное выражение этого не учитывает. Чтобы это исправить следует его немного поправить:

Проверка валидности номера телефона в javascript

С номером телефона ситуация сложнее, так как номер можно ввести десятками способов:

Есть несколько выходов из ситуации:

• продумать все возможные шаблоны и составлять для них правила;
• заставить посетителя вводить телефон по определенному шаблону;
• ограничиться проверкой на случайные ошибки.

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

В правиле указываем что первый символ должен быть обязательно цифрой или плюсом «[\d\+]» , а последний только цифрой — «\d» . В середине разрешаем использовать скобоки, пробел и знак дефиса — «[\d\(\)\ -]» , от 4 до 14 символов. Так как скобки и пробел являются зарезервированными элементами регулярных выражений, перед ними ставим обратный слеш.

Для любителей жестких шаблонов приведу пример проверки номера вида 8 (999) 123-45-64

Исходный код примера: html и javascript

Это полный код тестовой странички, на которой я использовал форму и js скрипты для отладки правил из этой статьи. Можете скопировать его и протестировать у себя на компьютере.

      
Пожалуйста, заполните все поля формы!
 E-mail:  
Телефон:  
   

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

В этом случае форма отправится только если обе функции вернут значение «true».

Источник

Какое регулярное выражение подойдет для проверки номера телефона?

Здравствуйте!
Подскажите пожалуйста регулярное выражение для использования js для проверки правильности номера телефона который может быть написан в нескольких из этих форматов
8(ddd)ddddddd;
+7(ddd)ddddddd;
8dddddddddd;
+7dddddddddd;
Заранее спасибо.
Проверка будет производится на стране браузера клиента

Тоже столкнулся с проблемой валидизации телефонных номеров.
Телефоны берутся с участников вебинаров, на которые записываются люди из очень разных стран.
Соответственно, со всеми предыдущими схемами возникают проблемы:
1) а что если телефон с Украины (не +7-, а +38-)? А из Казахстана? А США (1-)? А Уганда ( +233-)? (из Уганды, правда, пока слушателей не было, но все впереди).
2)В разных местностях приняты самые невообразимые способы разбиения телефона на группы цифр:
8(8888)8-88-88-88 например. или 888(88)88888-888. Да и какие угодно могут возникнуть в будущем.
Поэтому вариант с «дефолтным разбиением типа «8(888)888-88-88 ну совершенно не катит.

Соответственно, я придумал следующий валидатор:
1) В начале могут быть пробелы, после них может быть «+» (а может и не быть)
2) Дальше должна идти группа цифр в количестве от 10 до 14 (мне нужны номера в международном формате; но если кому-то нужны более короткие — можно исправить диапазон длин).
3) Поскольку я не знаю, как люди группируют цифры — до и после каждой цифры может быть один из 8 знаков («-«, » «, «_», «(«, «)», «:», «=», «+»). Это значит, что между двумя цифрами могут быть любые два из этих знаков.

В итоге получилось очень коротко и понятно )) :
/^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?)(\s*)?$/

Съедает следующие телефоны:
+7(903)888-88-88
8(999)99-999-99
+380(67)777-7-777
001-541-754-3010
+1-541-754-3010
19-49-89-636-48018
+233 205599853

Источник

Форматирование номеров телефона с помощью регулярных выражений

Такая элементарная вещь, как номер телефона, в письменных текстах живёт во множестве вариантов. Обыкновенный номер типа +7 (123) 123-45-67 можно встретить записанным без скобок или дефисов ( +7 123 1234567 ), а то и вообще без пробелов ( +71231234567 ). Не собираюсь оскорблять чувства пишущих, им и так непросто. Но уважающий себя веб-ресурс не может допустить такой типографической разношёрстности. Плюс к тому, необлагороженные номера неудобно читать человеку (то самое human-readable).

Данная статья о том, как привести все телефонные номера на странице к однообразному виду, а также проставить корректные ссылки типа tel: на них. Для решения поставленной задачи используются регулярные выражения JavaScript. Хороший обзор регэкспов дан здесь, также почитать по теме можно на MDN.

В качестве эталонной будет принята запись номера вида +7 (123) 123-45-67 .

Найти все телефонные номера на странице можно таким способом:

let pattern = new RegExp('(\+7|8)[\s(]*\d[)\s]*\d[\s-]?\d[\s-]?\d', 'g'); // создать регулярное выражение let phoneNumbers = document.body.innerText.match(pattern); // применить на всём тексте документа 

Метод match() вернёт и запишет в переменную phoneNumbers массив (объект типа Array ) со всеми найденными на странице номерами.

Дисклеймер. Виденное выше регулярное выражение может вызвать сильное чувство боли в глазах у неподготовленного читателя. Если вы не очень знакомы с регулярками, автор всё-таки советует для начала проработать несколько первых глав учебника на LearnJavascript.

На практике встречается начало и с 8 , и с +7 .

То есть, фактически, эти части паттерна распознают первые три цифры после кода страны, причём как взятые в скобки, так и без (квантификатор * синонимичен и означает «либо ноль, либо сколько угодно»).

Данная часть паттерна распознаёт последние 7 цифр номера. Они могут быть разделены дефисами, пробелами или вообще ничем.
Напоминалка: квантификатор ? синонимичен и означает «либо одно вхождение, либо ничего»).

Ну хорошо, найти все номера получилось. К сожалению, задача этим не исчерпывается. Как же взять и заменить все вхождения разом?

Здесь поможет метод replace() . Если у регулярного выражения указан флаг ‘g’ (второй аргумент конструктора), то replace() заменит все вхождения на то, что указано. Например, задача замены всех повторяющихся пробелов в тексте на одинарные решается таким простым способом:

На всякий: /\s/g — это краткая запись для new RegExp(‘\s+’, ‘g’) . Также вместо можно писать просто + .

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

Скобочная группа — термин из теории регулярных выражений. Технически это просто часть паттерна, взятая в скобки. Но к любой такой группе можно обратиться по индексу.

К счастью, replace() поддерживает работу с группами. Достаточно написать в шаблоне замены (второй параметр) $ ( $1 или $5 ), и функция заменит эту конструкцию на содержимое скобочной группы.

То была идея, а теперь реализация:

let pattern = /(\+7|8)[\s(]?(\d)[\s)]?(\d)[\s-]?(\d)[\s-]?(\d)/g; // паттерн с проставленными скобками let phoneNumbers = document.body.innerText.match(pattern); // найдём все номера let correctNumber = phoneNumbers[0].replace(pattern, '+7 ($2) $3-$4-$5'); // пробуем замену console.log(correctNumber); 

В результате будет выведен аккуратный, каноничный телефонный номер. Работает!

Теперь, чтобы заменить все найденные номера телефонов на единообразные, добавим флаг g :

let pattern = /(\+7|8)[\s(]?(\d)[\s)]?(\d)[\s-]?(\d)[\s-]?(\d)/g; document.body.innerHTML = document.body.innerHTML.replace(pattern, '+7 ($2) $3-$4-$5'); 

Усложним шаблон функции replace() , чтобы номер телефона был кликабельным (ссылка с префиксом tel: ):

То есть, для корректной работы ссылки нужно в её коде выписать все цифры номера подряд — как раз самый неудобный для чтения человеком вариант.

Tags:

Источник

Phone number regex

The regular expressions below can be used to validate if a string is a valid phone number format and to extract a phone number from a string. Please note that this validation can not tell if a phone number actually exists.

The basic international phone number validation

A simple regex to validate string against a valid international phone number format without delimiters and with an optional plus sign:

Enter a text in the input above to see the result

Example code in Javascript