Проверка адреса email и номера телефона на javascript
Предоставляя пользователю возможность заполнения полей на сайте, следует проверять введенные данные на валидность. Это позволит предупредить пользователя о случайных ошибках, а так же даст дополнительную защиту от спама. Ярким примером является форма обратной связи, обязательными полями которой часто бывают email и телефон. Займемся их проверкой на правильность заполнения с помощью javascript.
Информация лучше воспринимается на примерах, поэтому посмотрим готовую форму в действии:
Пожалуйста, заполните все поля формы!
Для начала разберем применяемые регулярные выражения, а полный код формы и javascript функций я приведу в конце статьи.
Валидность адреса электронной почты
Составим регулярное выражение для наших требований:
Разберём правило по частям:
Разобранный пример немного упрощен для лучшего восприятия. У него есть недостаток — первым знаком в email не может быть тире или точка, но приведенное регулярное выражение этого не учитывает. Чтобы это исправить следует его немного поправить:
Проверка валидности номера телефона в javascript
С номером телефона ситуация сложнее, так как номер можно ввести десятками способов:
Есть несколько выходов из ситуации:
Для форм обратной связи последний вариант кажется наилучшим. Во-первых, если человек не хочет указывать свой номер телефона, то никакие проверки на корректность не помогут. Он просто введет несуществующий или чужой номер. Во-вторых, посетители сайта не любят когда их загоняют в определенные рамки. Поэтому рекомендую использовать регулярное выражение следующего типа:
Для любителей жестких шаблонов приведу пример проверки номера вида 8 (999) 123-45-64
Исходный код примера: html и javascript
Это полный код тестовой странички, на которой я использовал форму и js скрипты для отладки правил из этой статьи. Можете скопировать его и протестировать у себя на компьютере.
Это демонстрационная версия. В случае с формой обратной связи нам следует проводить проверку полей не при нажатии на кнопку, а при попытке отправить её:
Источник
Форматирование номеров телефона с помощью регулярных выражений
Такая элементарная вещь, как номер телефона, в письменных текстах живёт во множестве вариантов. Обыкновенный номер типа +7 (123) 123-45-67 можно встретить записанным без скобок или дефисов ( +7 123 1234567 ), а то и вообще без пробелов ( +71231234567 ). Не собираюсь оскорблять чувства пишущих, им и так непросто. Но уважающий себя веб-ресурс не может допустить такой типографической разношёрстности. Плюс к тому, необлагороженные номера неудобно читать человеку (то самое human-readable).
Данная статья о том, как привести все телефонные номера на странице к однообразному виду, а также проставить корректные ссылки типа tel: на них. Для решения поставленной задачи используются регулярные выражения JavaScript. Хороший обзор регэкспов дан здесь, также почитать по теме можно на MDN.
Найти все телефонные номера на странице можно таким способом:
Метод match() вернёт и запишет в переменную phoneNumbers массив (объект типа Array ) со всеми найденными на странице номерами.
Дисклеймер. Виденное выше регулярное выражение может вызвать сильное чувство боли в глазах у неподготовленного читателя. Если вы не очень знакомы с регулярками, автор всё-таки советует для начала проработать несколько первых глав учебника на LearnJavascript.
Разберём это выражение:
То есть, фактически, эти части паттерна распознают первые три цифры после кода страны, причём как взятые в скобки, так и без (квантификатор * синонимичен <0,>и означает «либо ноль, либо сколько угодно»).
Ну хорошо, найти все номера получилось. К сожалению, задача этим не исчерпывается. Как же взять и заменить все вхождения разом?
Но ведь у нас задача сложнее: нельзя же заменить разные номера телефонов на один! Тут самое время вспомнить о скобочных группах.
Скобочная группа — термин из теории регулярных выражений. Технически это просто часть паттерна, взятая в скобки. Но к любой такой группе можно обратиться по индексу.
То была идея, а теперь реализация:
В результате будет выведен аккуратный, каноничный телефонный номер. Работает!
Теперь, чтобы заменить все найденные номера телефонов на единообразные, добавим флаг g :
То есть, для корректной работы ссылки нужно в её коде выписать все цифры номера подряд — как раз самый неудобный для чтения человеком вариант.
Источник
Проверка номера телефона с помощью JavaScript
Я нашел этот код на каком-то сайте, и она прекрасно работает. Он подтверждает, что номер телефона находится в одном из следующих форматов:
(123) 456-7890 или 123-456-7890
проблема в том, что мой клиент (я не знаю, почему, может быть, клиент питания) хочет добавить другой формат, десять чисел последовательно, что-то вроде этого: 1234567890.
Я использую это регулярное выражение,
Как добавить что это также подтверждает другой формат? Я не силен в регулярных выражениях.
23 ответов
во-первых, ваш валидатор формата, очевидно, подходит только для NANP (код страны +1) чисел. Будет ли ваше приложение использоваться кем-то с номером телефона из-за пределов Северной Америки? Если это так, вы не хотите препятствовать этим людям вводить совершенно действительный [международный] номер.
Итак, ваше регулярное выражение передаст номер (123) 123 4566, даже если это не действительный номер телефона. Вы можете исправить это, заменив \d <3>С 4<1>\d <2>.
наконец, я чувствую, что вы проверяете ввод пользователя в веб-браузере. Помните, что проверка на стороне клиента только a удобство вы предоставляете пользователю; вам все равно нужно проверить все входные данные (снова) на сервере.
мое регулярное выражение выбора:
(123) 456-7890
(123)456-7890
123-456-7890
123.456.7890
1234567890
+31636363634
075-63546725
Я бы проигнорировал формат и проверил числовое содержимое:
следующее регулярное выражение будет проверять любой из этих форматов:
(123) 456-7890
123-456-7890
123.456.7890
1234567890
Javascript анализатор телефонных номеров с метаданными для более чем 200 стран: https://github.com/googlei18n/libphonenumber
это очень свободный вариант, и я предпочитаю держать его таким образом, в основном я использую его в регистрационных формах, где пользователям нужно добавить свой номер телефона. Обычно пользователи имеют проблемы с формами, которые обеспечивают строгие правила форматирования, я предпочитаю, чтобы пользователь заполнял номер и формат его на дисплее или перед сохранением в базе данных. http://regexr.com/3c53v
где str может быть любым из этих formarts: 555-555-5555 (555)555-5555 (555) 555-5555 555 555 5555 Пять миллиардов пятьсот пятьдесят пять миллионов пятьсот пятьдесят пять тысяч пятьсот пятьдесят пять 1 555 555 5555
Я бы предложил использовать что-то более четкое (особенно думая, кому придется поддерживать код). как насчет:
это будет работать:
это регулярное выражение проверяет следующий формат:
все ответы отличные, но вот один, я думаю, немного более полный.
это написано для использования javascript match одного числа в одной строке:
Я приветствую любые предложения, исправления или критику этого решения. Насколько я могу судить, это соответствует формату NANP (для номеров США-я не проверял другие североамериканские страны при создании этого), избегает любых ошибок 911 (не может быть в коде области или коде региона), устраняет только те 555 номеров, которые на самом деле недействительны (код региона 555 с последующим 01xx, где x = любое число).
это проверит любой номер телефона переменного формата:
\(?\d<3>\)? находит 3 цифры, заключенные в скобки или нет.
([\-\s\.])? находит любой из этих символов-разделителей или нет
использует первый согласованный разделитель-это гарантирует, что разделители одинаковы. Поэтому (000) 999-5555 не будет проверять здесь, потому что есть разделитель пробелов и тире, поэтому просто удалите «\1 » и замените его подшаблон разделителя (это также будет проверять нестандартные форматы). Тем не менее, вы должны быть формат, намекающий на ввод пользователя в любом случае.
BTW это для JavaScript, следовательно, для двойного побега.
Я должен согласиться, что проверка телефонных номеров является сложной задачей. Что касается этой конкретной проблемы, я бы изменил регулярное выражение с
поскольку единственным элементом, который становится ненужным, является последний тире / пробел.
хотя этот пост старый, но хочу оставить свое содействие. эти принимаются: Пять миллиардов пятьсот пятьдесят пять миллионов пятьсот пятьдесят пять тысяч пятьсот пятьдесят пять 555-555-5555 (555)555-5555 1(555)555-5555 1 555 555 5555 1 555-555-5555 1 (555) 555-5555
это код, который я использовал:
Если вы используете на тег input, чем этот код поможет вам. Я пишу этот код, я думаю, что это очень хороший способ использовать во входных данных. но вы можете изменить его, используя свой формат. Это поможет пользователю исправить их формат на тег input.
простое регулярное выражение: /\b\d<3>[-.]?\d<3>[-.]?\d<4>\b/g
Проверьте формат, надеюсь, он работает:
444-555-1234
f:246.555.8888
m: 1235554567
просто хотел добавить решение специально для выбора нелокальных телефонных номеров (800 и 900 типов).
Google имеет хорошую библиотеку для обработки телефонных номеров в JavaScript: https://github.com/googlei18n/libphonenumber. Работает также с Java и C++.
Я бы предпочел использовать их, потому что этот должен быть действительно хорошо протестирован в производстве. Так что это должно быть безопасно для ретрансляции.
эта функция работала для нас хорошо:
Источник
33 самые полезные регулярки для веб-разработчика
33 самые полезные регулярки с примерами использования для быстрого решения наиболее распространенных задач веб-разработки.
Пользовательские данные
1. Юзернейм
2. Валидация email
Проверка адреса электронной почты на корректность – одна из самых частых задач веб-разработчика. Без этого не обходятся ни разнообразные формы подписки, ни авторизация.
Для валидации email существует множество различных регулярок. Вот одна из них – не самая большая и не самая сложная, но достаточно точная для быстрой проверки адреса:
Что используем:
Флаг i в регулярных выражений обеспечивает регистронезависимость сравнения.
3. Номер телефона
Проверяя номер телефона, обязательно учитывайте общепринятые форматы, так как в разных странах их принято записывать по-разному. Например, для американского стиля подойдет вот такая регулярка:
4. Надёжность пароля
Часто встречаете на различных сервисах требование придумать сложный пароль? Кто и как определяет требуемую степень сложности? На самом деле, для этого есть некоторые стандарты: минимальная длина, разный регистр символов, наличие букв, цифр и специальных знаков.
Чтобы обеспечить ваших пользователей надежными паролями, можете воспользоваться вот таким выражением (или составить собственные регулярки со специфическими требованиями):
Подробнее о надежности паролей вы можете узнать из этого руководства.
5. Почтовый индекс (zip-code)
Формат почтового индекса, как и телефона, зависит от конкретного государства.
В России все просто: шесть цифр подряд без разделителей.
Американский zip-code может состоять из 5 символов или в расширенном формате ZIP+4 – из 9.
6. Номер кредитной карты
Разумеется, при проверке номера платежной карты не стоит полагаться на регулярные выражения. Однако с их помощью вы можете сразу же отсеять очевидно неподходящие последовательности и не нагружать сервер лишним запросом.
С помощью вот такой длинной регулярки вы можете поддерживать сразу несколько платежных систем:
Подробнее разобраться, откуда что взялось, вы можете здесь.
Что используем:
Вертикальная черта | в регулярных выражениях обозначает альтернацию, то есть выбор одного варианта из нескольких.
Распространенные форматы
7. Начальные и конечные пробелы
Пробелы в начале и конце строки обычно не несут никакой смысловой нагрузки, но могут повлиять на анализ и обработку данных, поэтому от них следует сразу же избавляться.
Что используем:
Квантификатор + соответствует инструкции <1,>– один и более символов.
8. Дата
С датами приходится работать очень часто, а форматов записи у них великое множество. Прежде чем начинать обработку, имеет смысл проверить, соответствует ли вид переданной строки требуемому.
Вот такое регулярное выражение поддерживает несколько форматов дат – с полными и краткими числами (5-1-91 и 05-01-1991) и разными разделителями (точка, прямой или обратный слеш).
Здесь учитываются даже високосные годы!
9. IPv4
Адрес IP используется для идентификации конкретного компьютера в интернете Он состоит из четырех групп цифр (байтов), разделенных точками (192.0.2.235).
Что используем:
Класс \b означает «границу слова» и имеет нулевую ширину (то есть это не отдельный символ).
10. IPv6
IPv6 – это новый, более сложный синтаксис IP-протокола. Выражение для проверки на этот формат выглядит куда страшнее, хотя на самом деле разница заключается только в поддержке шестнадцатеричных чисел:
11. Base64
Base64 – достаточно распространенный формат кодирования бинарных данных, который часто используется, например, в email-рассылках.
Для валидации строки в этом формате можно использовать следующее регулярное выражение:
12. ISBN
ISBN – международная номенклатура для печатных книг. Номер может состоять из 10 (ISBN-10) или 13 цифр (ISBN-13). На самих книгах ISBN обычно разделен дефисами на несколько групп (код страны, издательства и самой книги), но для проверки и использования их следует удалять.
Это регулярное выражение позволяет проверить оба формата сразу:
Числа
13. Проверка на число
Очень простая проверка строки на число с помощью регулярок:
14. Разделитель разрядов
Задача разбить большое число на разряды по три цифры встречается в разработке довольно часто. Оказывается это очень легко сделать с помощью регулярок.
15. Цена
Цены могут быть представлены во множестве различных форматов. Универсального регулярного выражения для них, скорее всего, не существует, но цену в долларах из строки извлечь очень просто.
Эта регулярка предполагает, что для разделения разрядов числа используются запятые, а дробная часть отделена точкой:
Что используем:
Комбинация <2>означает, что символ из диапазона 9 должен быть повторен ровно 2 раза (дробная часть цены).
Файлы и URL
16. Сопоставить строку URL
Если вам необходимо проверить, является ли полученная строка URL-адресом, вы можете воспользоваться вот такой регуляркой:
Она подойдет для адресов с различными протоколами (HTTP, HTTPS, FTP) и даже без протокола.
17. Извлечение домена
В URL-адресе много частей: протокол, домен, поддомены, путь к странице и строка запроса. С помощью регулярок можно отбросить все лишнее и получить только домен:
Что используем:
Метод match возвращает объект с данными совпадения. Под индексом 1 в нем хранится совпадение, соответствующее первой скобочной группе.
18. Расширения
Одна строчка регулярного выражения позволяет быстро и просто получить расширение файла, с которым вам предстоит работать:
Разумеется, при необходимости сюда можно добавлять другие расширения.
19. Протокол
Иногда требуется извлечь протокол полученной ссылки. Регулярные выражения и тут облегчают жизнь:
Социальные сети
20. Twitter
Имя пользователя Twitter:
21. Facebook
URL аккаунта на Facebook:
22. YouTube
Получение ID видео на YouTube:
Что используем:
Метод exec объекта регулярного выражения работает почти так же, как метод match строки.
HTML и CSS
23. HEX-цвета
Веб-разработчику часто приходится иметь дело с цветами, заданными в шестнадцатеричном формате. Регулярки позволяют легко извлекать такие цвета из строки:
24. Адрес изображения
25. CSS-свойства
Еще одна нетривиальная ситуация – получение свойств CSS с помощью регулярных выражений:
Что используем:
Флаг m в регулярных выражениях включает многострочный режим.
26. HTML комментарии
А это очень полезная регулярка для удаления комментариев из HTML-кода:
27. Title
Получить заголовок веб-страницы можно с помощью такого регулярного выражения:
28. rel=«nofollow»
Эта регулярка выбирает в тексте все ссылки с протоколом http/https без атрибута rel и добавляет его.
29. Медиа запросы
Если требуется проанализировать медиа-запросы CSS, воспользуйтесь этой регуляркой:
Что используем:
Класс \s обозначает пробельный символ (а также таб и перевод строки), а класс \S – наоборот, любой символ кроме пробельного.
30. Подсветка слов
Полезное выражение для поиска и выделения слов в тексте:
Разумеется, слово ipsum можно заменить на любое другое слово или словосочетание
Другие задачи веб-разработчика
31. Проверка версии Internet Explorer
К счастью, старый добрый IE постепенно уходит в прошлое, но он все же еще играет некоторую роль в современном вебе. Этот фрагмент кода позволяет определить версию всеми любимого браузера:
32. Удалить повторы
Регулярки дают возможность автоматически удалить случайные повторы слов без проглядывания всего текста:
33. Количество слов
Порой веб-разработчику необходимо определить количество слов в строке, например, для организации ключевых слов в инструментах аналитики. Сделать это можно с помощью следующих регулярок:
Источник
Шаблон для номера телефона
Всем привет. У меня такой вопрос кто-нибудь знает RegExp шаблон для номера телефона (СНГ)? Желательно чтобы умел разбирать:
Буду рад любой помощи.
P.S. Пишу на JavaScript
3 ответа 3
Решил сделать так. Сначало отсеить все нецифровые значения номера, исключения сделать только для всяких скобо, дефисов, пробелов и т.д.
Потом привести их все к нормальному виду. Например вот так:
Ориентировано на российские мобильные + городские с кодом из 3 цифр (например, Москва). Пропускает:
Пользуюсь давно вот этой регуляркой и очень рад:
Всё ещё ищете ответ? Посмотрите другие вопросы с метками регулярные-выражения javascript или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.8.40416
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Источник
