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

Введение

Осознаете вы это или нет, но данные стали важной частью нашей повседневной жизни. От заказа еды в Интернете до поиска корма для кошек — мы постоянно отправляем и получаем данные. Как разработчики веб-приложений, мы несем ответственность за то, чтобы вводимые пользователем данные были в указанном формате, чтобы база данных правильно понимала данные, а приложение оставалось надежным.

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

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

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

Что такое регулярное выражение?

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

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

Регулярное выражение использует специальные символы для обозначения различных типов шаблонов. Например:

• . (точка) — это специальный символ, который может соответствовать любому символу.
• * (звездочка) соответствует предыдущему символу 0 или более раз.
• + (плюс) соответствует предыдущему символу один или несколько раз.
• ? (вопросительный знак) делает предыдущий символ необязательным.
• [abc] соответствует любому из символов a, bили c.
• (abc) группирует символы вместе.
• ^ (вставка) соответствует началу строки.
• $ (доллар) соответствует концу строки.

Это лишь некоторые из них. Если вы хотите погрузиться глубже и узнать больше о шаблонах, вы можете обратиться к этот документ от Microsoft.

Давайте создадим регулярное выражение, которое проверяет, является ли данный набор чисел пятизначным почтовым индексом. Чтобы начать писать выражение, мы будем использовать ^ (вставка), так как он соответствует началу строки. В регулярном выражении d соответствует любой цифре и числу внутри фигурных скобок ({}) соответствует предыдущему элементу ровно столько раз, сколько указано в фигурных скобках. Из списка выше мы знаем, что $ используется для соответствия концу строки.

Объединив эту информацию, мы получим регулярное выражение, подобное этому:

/^d{5}$/

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

Регулярное выражение для соответствия пятизначному почтовому индексу

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

Регулярные выражения JavaScript

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

В JavaScript RegExp объект используется для сопоставления с образцом. Этот объект можно использовать двумя способами:

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

Буквальное обозначение можно использовать так просто:

const expr = /^d{5}$/i;

С другой стороны, с нотацией конструктора вам нужно будет использовать RegExp конструктор для создания его экземпляра. Вот как это выглядит:

const expr = new RegExp(/^d{5}$/, "i");

Вы можете прочитать больше об объекте RegExp из официальные документы MDN. Теперь давайте рассмотрим важность проверки номера телефона и различных компонентов номера телефона.

Проверка номера телефона и компоненты

Проверка телефонных номеров на стороне клиента имеет решающее значение при сохранении телефонных номеров в вашей базе данных. Без надлежащей проверки ваш код может демонстрировать неожиданное поведение.

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

Как правило, номер телефона состоит из четырех частей:

• Код страны: первые 1–3 цифры (в зависимости от страны) определяют страну телефонного номера. Этот код позволяет направить вызов в правильную страну. Код страны не может начинаться с 0.

Статья, которую вы сейчас редактируете, называется «Проверка номеров телефонов в JavaScript с помощью регулярных выражений». Фрагмент текста для редактирования:

• Код города: эта часть номера, также известная как код города или телефонного номера, помогает направить вызов в нужную географическую область внутри страны. В некоторых странах, например в США, коды городов также могут указывать на определенный набор телефонных номеров для конкретной услуги. Кроме того, в Северной Америке код города не может начинаться с 0 или 1.
• Телефонный префикс: эта последовательность номеров назначается телефонной компанией конкретному центральному офису или телефонной станции, что еще больше сужает конкретную географическую область или район.
• Номер линии: это уникальный номер, присвоенный конкретной телефонной линии для домашнего хозяйства или предприятия в пределах области префикса. Эта часть номера обычно обеспечивает уникальность каждого телефонного номера в пределах страны, региона и префикса.

Исключая код страны, объединение оставшихся частей приводит к десятизначному номеру телефона, где код города и телефонный префикс состоят из трех цифр каждый, а номер линии состоит из четырех цифр.

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

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

Мы уже поняли основную структуру телефонного номера. Мы также узнали о регулярных выражениях и о том, как их можно использовать в JavaScript. В этом разделе мы напишем простую функцию JavaScript, которая проверяет номера телефонов в заданном формате:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Например, допустимый номер телефона для нашей функции будет таким +123-456-789-1234, Но не +012-123-456-7890 or +12-123-456-789, так как эти телефонные номера не соответствуют правилам телефонных номеров, которые мы обсуждали ранее.

Теперь давайте приступим к написанию регулярного выражения. Во-первых, давайте проверим, содержит ли код страны от 1 до 3 цифр и не начинается ли он с нуля.

Чтобы указать начало регулярного выражения, используйте символ вставки (^), затем проверьте наличие плюса в начале. Для этой цели воспользуемся +, что будет соответствовать тому, что плюс существует в начале. Теперь, чтобы убедиться, что цифры кода страны составляют от одной до трех цифр, а первая цифра не равна нулю, мы можем написать что-то вроде этого: [1-9]{1}[0-9]{0,2}, Вот, [1-9]{1} указывает, что любая цифра от 1 до 9 может существовать ровно один раз, и аналогично [0-9]{0,2} указывает, что любая цифра от 0 до 9 может встречаться от нуля до двух раз.

Для разделителя мы можем добавить - (дефис) между разделами номера. Один - можно добавить после проверки кода страны. Итак, на данный момент регулярное выражение выглядит так:

^+[1-9]{1}[0-9]{0,2}-$

Ассоциация $ в конце указывает конец строки. Теперь для кода города это будет очень похоже. Код города не может начинаться с нуля или единицы. Итак, первая часть будет [2-9]{1}. Это соответствует тому, что первое число находится между 2 и 9. Это совпадение происходит один раз. Тогда для остальной части кода мы можем написать [0-9]{2}. Это гарантирует, что после первой цифры будет ровно две цифры, и для каждой цифры будет диапазон от 0 до 9. Опять же, добавьте разделитель дефиса в конце.

Теперь полное регулярное выражение будет выглядеть так:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|

Давайте снова воспользуемся тем же шаблоном для проверки телефонного префикса. Предположим, что префикс телефона также не может начинаться ни с нуля, ни с единицы. Итак, добавление [2-9]{1}[0-9]{2} и снова дефис сделает выражение таким:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|

Единственная оставшаяся часть — это номер строки, который может быть любой цифрой длиной ровно четыре. Это проще, чем другие. Выражение [0-9]{4}.

Полное выражение выглядит следующим образом:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|-Line-|

Вы, должно быть, заметили частое использование фигурных скобок. Они используются для сопоставления экземпляров, представленных внутри скобки. Если это конкретная цифра, например {1}, он будет соответствовать предыдущему шаблону ровно один раз. Однако, если это диапазон, например {0, 2}, он определяет минимальное и максимальное количество совпадений. Итак, в случае {0, 2}, он будет соответствовать шаблону минимум XNUMX раз и максимум два раза.

Узор готов. Теперь мы можем написать простую функцию JavaScript для проверки правильности номера телефона с помощью регулярного выражения. Вот функция:

function validatePhoneNumber(phoneNumber) { const pattern = new RegExp("^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$"); if (pattern.test(phoneNumber)) { console.log("Phone number is valid"); return true; } else { console.log("Phone number is not valid"); return false; }
} validatePhoneNumber("+123-456-789-1234"); validatePhoneNumber("+0-123-456-7890"); validatePhoneNumber("+12-012-123-1234"); 

Функция довольно проста. В качестве входных данных принимает номер телефона. Шаблон регулярного выражения хранится внутри переменной с именем pattern. Шаблон создается с помощью конструктора RegExp и передачи выражения в качестве параметра конструктору. Затем мы проверяем номер телефона с помощью test метод, доступный в объекте. Используя оператор if-else, мы проверяем, проходит ли номер телефона тест. Если это так, мы возвращаем true и отправляем консольное сообщение о том, что Phone number is valid. В противном случае он возвращает false и отображает консольное сообщение о том, что номер телефона недействителен.

С этим мы готовы идти. Теперь вы можете проверить свои номера телефонов, чтобы убедиться, что они действительны.

Обзор

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

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

• SEO-контент и PR-распределение. Получите усиление сегодня.
• ЭВМ Финанс. Единый интерфейс для децентрализованных финансов. Доступ здесь.
• Квантум Медиа Групп. ИК/PR усиление. Доступ здесь.
• ПлатонАйСтрим. Анализ данных Web3. Расширение знаний. Доступ здесь.
• Источник: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/