Sprawdź numery telefonów w JavaScript za pomocą wyrażeń regularnych

Opublikowane ponownie przez Plato

Obserwuje: 0

Wprowadzenie

Niezależnie od tego, czy zdajesz sobie z tego sprawę, czy nie, dane stały się kluczową częścią naszego codziennego życia. Nieustannie wysyłamy i odbieramy dane, od zamawiania jedzenia przez Internet po wyszukiwanie karmy dla kotów. Jako twórcy aplikacji internetowych jesteśmy odpowiedzialni za upewnienie się, że dane wprowadzane przez użytkownika są w określonym formacie, tak aby baza danych prawidłowo rozumiała dane, a aplikacja działała niezawodnie.

Weryfikacja numeru telefonu jest ważna, ponieważ gwarantuje, że dane są zapisywane w spójnej formie w całej bazie danych. Na przykład użytkownicy mogą potrzebować wyjaśnienia, czy powinni wprowadzić numer kierunkowy kraju przed numerem telefonu. Dzięki odpowiedniej walidacji użytkownicy mogą łatwo określić, czy jest to wymagane. Podobnie, doświadczenie użytkownika poprawia się dzięki spójnemu formatowi, ponieważ wiesz, czego oczekiwać od użytkowników i możesz odpowiednio zaimplementować logikę. Byłoby to złe doświadczenie dla użytkowników, gdyby kod zepsuł się na późniejszym etapie z powodu niespójnych danych.

Wyrażenia regularne to potężne narzędzia do dopasowywania wzorców. Zapewniają elastyczność dopasowywania wzorców różnych typów, w zależności od przypadku użycia. Ponadto wyrażenia regularne są niezależne od języka, dzięki czemu logika sprawdzania poprawności jest bardziej przenośna, ponieważ można łatwo zintegrować podstawową weryfikację. Praca z wyrażeniami regularnymi w JavaScript jest prostym zadaniem.

Ten artykuł pomoże Ci zrozumieć, jak używać mocy wyrażeń regularnych do sprawdzania poprawności numerów telefonów dla Twojej aplikacji. Napiszesz prostą funkcję JavaScript do sprawdzania poprawności numerów telefonów z numerami kierunkowymi krajów.

Co to jest wyrażenie regularne?

Mówiąc prościej, wyrażenie regularne dopasowuje predefiniowany wzorzec w danym łańcuchu. Jest szeroko stosowany w językach programowania i używany głównie do sprawdzania poprawności danych wejściowych określonego formatu. Ponadto wyrażenia regularne są powszechnie używane do wyszukiwania, dzielenia i zastępowania określonych wzorców.

Załóżmy, że chcesz znaleźć adres e-mail w dokumencie. Adres e-mail może być dowolnym adresem, a nie konkretnym. Napisanie prostego wyrażenia pomoże ci szybko znaleźć wzorzec, ponieważ znasz już strukturę adresu e-mail.

Wyrażenie regularne używa znaków specjalnych do oznaczenia różnych typów wzorców. Na przykład:

. (kropka) to znak specjalny, który może pasować do dowolnego znaku.
* (gwiazdka) dopasowuje poprzedzający znak 0 lub więcej razy.
+ (plus) pasuje do poprzedzającego znaku jeden lub więcej razy.
? (znak zapytania) sprawia, że poprzedzający znak jest opcjonalny.
[abc] pasuje do dowolnego znaku a, blub c.
(abc) grupuje znaki razem.
^ (daszek) pasuje do początku wiersza.
$ (dolar) pasuje do końca wiersza.

To tylko kilka. Jeśli chcesz zanurkować głębiej i poznać więcej wzorców, możesz odnieść się do ten dokument firmy Microsoft.

Zbudujmy wyrażenie regularne, które sprawdza, czy podany zestaw liczb jest pięciocyfrowym kodem pocztowym. Aby rozpocząć pisanie wyrażenia, użyjemy the ^ (daszek), ponieważ pasuje do początku wiersza. W wyrażeniu regularnym d pasuje do dowolnej cyfry i liczby w nawiasach klamrowych ({}) dopasowuje poprzedni element dokładnie tyle razy, ile razy podano w nawiasach klamrowych. Wiemy to z powyższej listy $ służy do dopasowania końca linii.

Łącząc te informacje, otrzymujemy takie wyrażenie regularne:

/^d{5}$/

Przyjrzyjmy się teraz poniższej grafice, aby lepiej zrozumieć wyrażenie.

Wyrażenie regularne pasujące do pięciocyfrowego kodu pocztowego

Teraz, gdy mamy podstawową wiedzę na temat wyrażeń regularnych i ich ogólnej konstrukcji, nadszedł czas, aby zbadać, w jaki sposób można zaimplementować te wyrażenia w funkcji JavaScript.

Wyrażenia regularne JavaScript

JavaScript jest najpopularniejszy język programowania wśród deweloperów. Ponieważ prawie wszystkie aplikacje internetowe wymagają języka JavaScript, kluczowe znaczenie ma zrozumienie, w jaki sposób można używać wyrażeń regularnych w tym języku.

W JavaScript, RegExp obiekt służy do dopasowywania wzorców. Obiekt ten można wykorzystać na dwa sposoby:

Używając notacji literalnej, gdzie wzór jest sformatowany między dwoma ukośnikami
Używając notacji konstruktora, gdzie albo string albo a RegExp obiekt jest przekazywany

Notacji literalnej można użyć w prosty sposób:

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

Z drugiej strony, z notacją konstruktora, będziesz musiał użyć metody RegExp konstruktora, aby utworzyć jego instancję. Oto jak to wygląda:

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

Możesz przeczytać więcej o obiekcie RegExp z oficjalne dokumenty MDN. Przyjrzyjmy się teraz, jak ważna jest weryfikacja numeru telefonu i różne elementy numeru telefonu.

Weryfikacja numeru telefonu i składniki

Walidacja numerów telefonów po stronie klienta jest kluczowa podczas zapisywania numerów telefonów w bazie danych. Bez odpowiedniej weryfikacji kod może wykazywać nieoczekiwane zachowania.

Zapoznaj się z naszym praktycznym, praktycznym przewodnikiem dotyczącym nauki Git, zawierającym najlepsze praktyki, standardy przyjęte w branży i dołączoną ściągawkę. Zatrzymaj polecenia Google Git, a właściwie uczyć się to!

Załóżmy na przykład, że korzystasz z usługi, która wymaga podania numeru kierunkowego kraju wraz z numerem telefonu, ale Twoi użytkownicy nie uwzględniają ich z powodu braku weryfikacji. Teraz masz tylko numer bez numer kierunkowy kraju, a usługa wysyłająca wiadomości tekstowe SMS może z tego powodu nie działać. To tylko jeden z hipotetycznych scenariuszy. Inne problemy mogą nawet spowodować awarię aplikacji. Kluczowe znaczenie ma właściwa obsługa danych w interfejsie użytkownika, zapewniająca zapisywanie czystych i spójnych danych w całej bazie danych.

Ogólnie numer telefonu składa się z czterech części:

Numer kierunkowy kraju: Pierwsze od 1 do 3 cyfr (w zależności od kraju) określają kraj numeru telefonu. Ten kod umożliwia przekierowanie połączenia do właściwego kraju. Kod kraju nie może zaczynać się od 0.

Artykuł, który obecnie edytujesz, nosi tytuł „Weryfikuj numery telefonów w JavaScript za pomocą wyrażeń regularnych”. Kawałek tekstu do edycji:

Numer kierunkowy: Ta część numeru, znana również jako miasto lub numer kierunkowy, pomaga przekierować połączenie do właściwego obszaru geograficznego w kraju. W niektórych krajach, na przykład w Stanach Zjednoczonych, numery kierunkowe mogą również wskazywać określony zestaw numerów telefonów dla określonej usługi. Ponadto w Ameryce Północnej numer kierunkowy nie może zaczynać się od 0 ani 1.
Prefiks telefoniczny: Ta sekwencja numerów jest przypisywana przez firmę telefoniczną do określonej centrali lub centrali telefonicznej, co dodatkowo zawęża określony obszar geograficzny lub okolicę.
Numer linii: Jest to unikalny numer przypisany do konkretnej linii telefonicznej dla gospodarstwa domowego lub firmy w obszarze prefiksu. Ta część numeru zwykle zapewnia, że każdy numer telefonu w kraju, obszarze i prefiksie jest unikalny.

Wyłączając numer kierunkowy kraju, połączenie pozostałych części daje dziesięciocyfrowy numer telefonu, w którym numer kierunkowy i prefiks telefonu to trzy cyfry, a numer linii to cztery cyfry.

Przejdźmy teraz do napisania funkcji JavaScript, która sprawdza poprawność numeru telefonu na podstawie tych kryteriów przy użyciu wyrażeń regularnych.

Utwórz RegEx do sprawdzania poprawności numeru telefonu

Zrozumieliśmy już podstawową strukturę numeru telefonu. Dowiedzieliśmy się również o wyrażeniach regularnych i o tym, jak można ich używać w JavaScript. W tej sekcji napiszemy prostą funkcję JavaScript, która sprawdza poprawność numerów telefonów w podanym formacie:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Na przykład prawidłowy numer telefonu dla naszej funkcji będzie wyglądał następująco +123-456-789-1234, Lecz nie +012-123-456-7890 or +12-123-456-789, ponieważ te numery telefonów nie są zgodne z zasadami dotyczącymi numerów telefonów, o których mówiliśmy wcześniej.

Przejdźmy teraz do pisania wyrażenia regularnego. Najpierw sprawdźmy, czy kod kraju ma od 1 do 3 cyfr i nie zaczyna się od zera.

Aby wskazać początek wyrażenia regularnego, użyj daszka (^), a następnie sprawdź, czy na początku istnieje plus. W tym celu skorzystajmy +, co będzie odpowiadać temu, że plus istnieje na początku. Teraz, aby upewnić się, że cyfry kodu kraju mają od jednej do trzech cyfr, a pierwsza cyfra nie jest zerem, możemy napisać coś takiego: [1-9]{1}[0-9]{0,2}. Tutaj, [1-9]{1} określa, że dowolna cyfra od 1 do 9 może wystąpić dokładnie raz i podobnie, [0-9]{0,2} wskazuje, że dowolna cyfra od 0 do 9 może występować od zera do dwóch razy.

Jako separator możemy dodać a - (myślnik) między sekcjami numeru. Jeden - można dodać po zatwierdzeniu kodu kraju. W tym momencie wyrażenie regularne wygląda tak:

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

Połączenia $ na końcu określa koniec wiersza. Teraz, dla numeru kierunkowego, będzie to całkiem podobne. Numer kierunkowy nie może zaczynać się od zera ani od jedynki. Tak więc pierwsza część będzie [2-9]{1}. Dopasowuje to, że pierwsza liczba jest między 2 a 9. To dopasowanie występuje jeden raz. Następnie dla reszty kodu możemy pisać [0-9]{2}. Zapewni to, że po pierwszej będą dokładnie dwie cyfry, a dla każdej cyfry będzie mieścić się w zakresie od 0 do 9. Ponownie dodaj separator łącznika na końcu.

Teraz pełne wyrażenie regularne będzie wyglądać tak:

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

Ponownie użyjmy tego samego wzorca do sprawdzenia prefiksu telefonu. Załóżmy, że prefiks telefoniczny również nie może zaczynać się od zera ani od jedynki. A więc dodając [2-9]{1}[0-9]{2} i ponownie myślnik sprawi, że wyrażenie będzie wyglądać tak:

^+[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--|-|

Jedyną pozostałą częścią jest numer wiersza, który może być dowolną cyfrą o długości dokładnie czterech. To jest prostsze niż inne. Wyrażenie jest [0-9]{4}.

Pełne wyrażenie jest następujące:

^+[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-|

Na pewno zauważyłeś częste używanie nawiasów klamrowych. Służą do dopasowania wystąpień znajdujących się wewnątrz nawiasu klamrowego. Jeśli jest to konkretna cyfra, np {1}, będzie pasować do poprzedniego wzorca dokładnie jeden raz. Jeśli jednak jest to zakres, np {0, 2}, określa minimalną i maksymalną liczbę dopasowań. A więc w przypadku {0, 2}, będzie pasować do wzorca co najmniej zero razy i maksymalnie dwa razy.

Wzór jest gotowy. Możemy teraz napisać prostą funkcję JavaScript, aby sprawdzić, czy numer telefonu jest prawidłowy, używając wyrażenia regularnego. Oto funkcja:

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");

Funkcja jest dość prosta. Jako dane wejściowe przyjmuje numer telefonu. Wzorzec wyrażenia regularnego jest przechowywany w zmiennej o nazwie pattern. Wzorzec jest tworzony za pomocą konstruktora RegExp i przekazywania wyrażenia jako parametru do konstruktora. Następnie testujemy numer telefonu za pomocą test metoda dostępna w obiekcie. Za pomocą instrukcji if-else sprawdzamy, czy numer telefonu przechodzi test. Jeśli tak, zwracamy wartość true i wysyłamy komunikat konsoli stwierdzający, że plik Phone number is valid. W przeciwnym razie zwraca wartość false i wyświetla komunikat konsoli wskazujący, że numer telefonu jest nieprawidłowy.

Dzięki temu jesteśmy gotowi do drogi. Teraz możesz przetestować swoje numery telefonów, aby sprawdzić, czy są prawidłowe.

Podsumowanie

Ten artykuł miał na celu przedstawienie krótkiego przeglądu wyrażeń regularnych, ich zastosowań oraz sposobów ich zastosowania do sprawdzania poprawności numerów telefonów. Omówiliśmy również różne składniki numeru telefonu i sposób testowania każdego składnika.

Mając podstawową wiedzę na temat wyrażeń regularnych, możesz teraz eksplorować dodatkowe wzorce. Możesz także skorzystać z narzędzi np Wyrażenie regularne101 do sprawdzania poprawności Twoich wyrażeń online.