Перевірте номери телефонів у JavaScript за допомогою регулярних виразів

Вступ

Усвідомлюєте ви це чи ні, але дані стали важливою частиною нашого повсякденного життя. Ми постійно надсилаємо й отримуємо дані, починаючи від онлайн-замовлення їжі й закінчуючи пошуком їжі для котів. Як розробники веб-додатків, ми несемо відповідальність за те, щоб користувачі вводили дані у вказаному форматі, щоб база даних правильно сприймала дані, а програма залишалася надійною.

Перевірка номера телефону важлива, оскільки вона гарантує, що дані зберігаються в єдиному форматі в усій базі даних. Наприклад, користувачам може знадобитися роз’яснення щодо того, чи слід їм вводити код країни перед номером телефону. За наявності відповідної перевірки користувачі можуть легко визначити, чи потрібна вона. Подібним чином взаємодія з користувачем покращується завдяки узгодженому формату, оскільки ви знаєте, чого очікувати від користувачів, і можете відповідним чином реалізувати логіку. Користувачам буде погано працювати, якщо код зламається на пізнішому етапі через суперечливі дані.

Регулярні вирази є потужними інструментами для зіставлення шаблонів. Вони забезпечують гнучкість зіставлення шаблонів різних типів залежно від вашого випадку використання. Крім того, регулярні вирази не залежать від мови, що робить вашу логіку перевірки більш переносимою, оскільки ви можете легко інтегрувати основну перевірку. Робота з регулярним виразом у JavaScript є простим завданням.

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

Що таке регулярний вираз?

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

Припустімо, ви хочете знайти адресу електронної пошти в документі. Електронна адреса може бути будь-якою, а не конкретною. Написання простого виразу допоможе вам швидко знайти шаблон, оскільки ви вже знаєте структуру електронної адреси.

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

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

Це лише деякі з них. Якщо ви хочете зануритися глибше та дізнатися більше про шаблони, ви можете звернутися до цей документ від Microsoft.

Давайте створимо регулярний вираз, який перевіряє, чи є заданий набір чисел п’ятизначним поштовим індексом. Щоб почати запис виразу, ми використаємо ^ знак (каретка), оскільки він відповідає початку рядка. У регулярному виразі d відповідає будь-якій цифрі та числу у фігурних дужках ({}) збігається з попереднім елементом рівно стільки разів, яке вказано в дужках. Зі списку вище ми це знаємо $ використовується для відповідності кінця рядка.

Об’єднавши цю інформацію, ми отримаємо такий регулярний вираз:

/^d{5}$/

Тепер давайте розглянемо малюнок нижче, щоб краще зрозуміти вираз.

Регулярний вираз для відповідності п’ятизначному поштовому індексу

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

Регулярні вирази JavaScript

JavaScript - це найпопулярніша мова програмування серед розробників. Оскільки майже всі веб-програми потребують JavaScript, дуже важливо зрозуміти, як регулярні вирази можна використовувати в цій мові.

У JavaScript файл RegExp об'єкт використовується для зіставлення шаблону. Цей об'єкт можна використовувати двома способами:

• Використання літерального позначення, де шаблон форматується між двома похилими рисками
• Використання нотації конструктора, де або рядок, або a 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 може існувати від нуля до двох разів.

Для роздільника ми можемо додати a - (дефіс) між частинами номера. Один - можна додати після підтвердження коду країни. Отже, на цьому етапі регулярний вираз виглядає так:

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

Команда $ at the end визначає кінець рядка. Тепер для коду регіону це буде досить схожим. Код міста не може починатися з нуля чи одиниці. Отже, перша частина буде [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}, він відповідатиме шаблону принаймні нуль разів і максимум два рази.

Викрійка готова. Тепер ми можемо написати просту функцію 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 і відображає консольне повідомлення про те, що номер телефону недійсний.

З цим ми готові. Тепер ви можете перевірити свої телефонні номери, щоб перевірити, чи вони дійсні.

Підсумки

Ця стаття мала на меті надати короткий огляд регулярних виразів, їх використання та способів їх застосування для перевірки телефонних номерів. Ми також обговорили різні компоненти номера телефону та те, як кожен компонент можна перевірити.

Маючи базове розуміння регулярних виразів, тепер ви можете досліджувати додаткові шаблони. Ви також можете використовувати такі інструменти, як Регулярний вираз 101 для перевірки ваших виразів онлайн.

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• EVM Фінанси. Уніфікований інтерфейс для децентралізованих фінансів. Доступ тут.
• Quantum Media Group. ІЧ/ПР посилений. Доступ тут.
• PlatoAiStream. Web3 Data Intelligence. Розширення знань. Доступ тут.
• джерело: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/