Numer telefonu Regex w JavaScript

Podczas weryfikacji formularza HTML bardzo ważne jest, aby zweryfikować numer telefonu. W zależności od regionu ważny numer telefonu może mieć kilka formatów. Istnieją ogólne zasady, takie jak ograniczenie liczby cyfr lub utrzymanie liczby tylko do wartości numerycznych. Jednak w niektórych sytuacjach numer telefonu może mieć format, który zawiera znaki specjalne, takie jak znak plus, Dash i nawias, lub może mieć zupełnie inny format niż inne kraje lub regiony.

To badanie wyjaśni Regex w sprawie walidacji numeru telefonu w JavaScript.

Numer telefonu Regex w JavaScript

Wyrażenia regularne są najprostszą metodą weryfikacji numerów telefonów w JavaScript. Jednak w zależności od preferencji użytkownika numery telefonów można sformatować na różne sposoby. Oto kilka wyrażeń regularnych do sprawdzania poprawności numeru telefonu.

Przykład 1: Podstawowy walidacja Numer telefonu
Tutaj podgrywane wzorce regularne lub wyrażenia regularne umożliwiają tylko numery telefonów z 10 cyframi. Żadne znaki specjalne, w tym przestrzenie, nie są dozwolone.

Wzór regularnego
Postępuj zgodnie z podanym wzorem Regex, aby uzyskać podstawowy walidację numeru telefonu:

/^\ d 10 $/

Lub

/^\ d 3 \ d 3 \ d 4 $/

Oto podział wszystkich elementów, które pomogą czytelnikom zrozumieć, co zawiera.

• "^„Oznacza początek łańcucha
• "/„Postać cięcia do przodu służy do wskazania granic wyrażenia regularnego
• "D”Oznacza cyfry
• "”Wskazuje limit
• "\„Postać odwrotna jest postać ucieczki
• "$„Oznacza koniec łańcucha

Użyj dowolnego z powyższych regexes dla sprawdzania numeru telefonu bez żadnego charakteru specjalnego lub ogranicznika.

W pliku HTML utwórz formularz za pomocą poniższego kodu:

Podstawowy regularność telefonu bez żadnego ograniczenia

Telefon #:

Proszę wpisać poprawny numer telefonu

Składać

W powyższym fragmencie kodu,

• Najpierw utwórz formularz z identyfikatorem „formularz".
• Następnie utwórz pole tekstowe wejściowe dla wartości wejściowej i przypisz identyfikator „numer".
• Akapit za pomocą

  tag, który wyświetli błąd, gdy wartość wejściowa jest nieprawidłowa.

• Utwórz przycisk Prześlij z identyfikatorem „składać".

Do komunikatu o błędzie używane są następujące klasy CSS:

.błąd

kolor czerwony;

.MSG

Nie wyświetla się;

Formularz HTML będzie wyglądał:

W pliku JavaScript użyj poniższych wierszy kodu:

funkcja VALITODEPHONenumber (e)
var pnumber = dokument.getElementById („liczba”).wartość;
Jeśli (!foneregex (pnumber))
dokument.getElementById („błąd”).Lista klas.Dodaj („MSG”);
alert („przesłany”);

w przeciwnym razie
dokument.getElementById („błąd”).Lista klas.Usuń („MSG”);

mi.PreventDefault ();

W tym kodowym fragmencie:

• Zdefiniuj funkcję „VALITODEPHONENUMBER ()".
• Uzyskaj wartość pola wejściowego za pomocą identyfikatora „numer”Z pomocą„getElementById ()„Metoda i przechowuj w zmiennej”pnumber".
• Wywołaj funkcję „foneregex ()”Przekazując numer wejściowy„pnumber”Jako argument i sprawdź, czy numer wejściowy jest równy od regularności.
  • Jeśli tak! Następnie pokazuje powiadomienie z komunikatem „złożony”I dodaje klasę„MSG" używając "Lista klas.dodać()„Metoda, która nie wyświetla żadnych.
  • Jeśli warunek nie jest prawdziwy, pokaż błąd, wywołując „Lista klas.usunąć()„Metoda, która wyświetli błąd.

Następnie zdefiniuj funkcję zwaną „foneregex ()„W przypadku zdefiniowania wzoru regularnego dla sprawdzania numeru telefonu:

funkcja foneregex (input_str)
var regPattern = /^\ d 3 \ d 3 \ d 4 $ /;
zwraca Regpattern.test (input_str);

Wreszcie, wywołać funkcję „VALITODEPHONENUMBER ()”Na przesłaniu za pomocą identyfikatora przycisku„składać”Z pomocą„addEventListener ()" metoda:

dokument.getElementById („Form”).addEventListener („Zwrot”, VALITODEPHONenumber);

Wyjście

Powyższe dane wyjściowe oznacza, że ​​wzorzec wyrabiania tylko dla numerów telefonów z 10 cyframi i bez żadnego specjalnego znaku lub ogranicznika skutecznie działa.

Przykład 2: Walidacja Regex złożonego numeru telefonu
Poniższe wzorce wyrażeń lub wyrażenia regularne umożliwiają numery telefonów z 10 cyframi i znakami specjalnymi, w tym Plus Sign, Dash i Parzyki.

Wzór regularnego do sprawdzania poprawności numerów telefonów za pomocą delimiter Dash (-)
Regex do sprawdzania poprawności numerów telefonów za pomocą 10 cyfr i deski rozdzielczej znaku specjalnego (-):

/^\ d 3 [-] \ d 3 [-] \ d 4) $/

Wzór pokazuje:

• "^„Oznacza początek łańcucha
• "/„Postać cięcia do przodu służy do wskazania granic wyrażenia regularnego
• "D”Oznacza cyfry
• "”Wskazuje limit
• "[-]”Wskazuje dozwolony charakter specjalny
• "\„Postać odwrotna jest postać ucieczki
• "$„Oznacza koniec łańcucha

Dodaj powyższy wzór regex w „foneregex ()„Zdefiniowana funkcja:

funkcja foneregex (input_str)
var regPattern = /^\ d 3 [-] \ d 3 [-] \ d 4) $ / /
zwraca Regpattern.test (input_str);

Odpowiednie wyjście będzie:

Wzór regularnego do sprawdzania poprawności numerów telefonów za pomocą delimiterów, w tym Dash (-) i Braces ()
Regex do sprawdzania poprawności numerów telefonów za pomocą 10 cyfr i znaków specjalnych Braces () i Dash (-):

/^\ (?(\ d 3) \)?[-]?(\ d 3) [-]?(\ d 4) $/

Wzór pokazuje:

• "^„Oznacza początek łańcucha
• "/„Postać cięcia do przodu służy do wskazania granic wyrażenia regularnego
• "D”Oznacza cyfry
• "”Wskazuje limit
• "[-]”Wskazuje dozwolony charakter specjalny
• "(?”Oznacza również, jak dozwolone w wejściu
• "\„Postać odwrotna jest postać ucieczki
• "$„Oznacza koniec łańcucha

Dołącz powyższe wyrażenie regularne w „foneregex ()„Zdefiniowana funkcja:

funkcja foneregex (input_str)
var regPattern = /^\ (?(\ d 3) \)?[-]?(\ d 3) [-]?(\ d 4) $/;
zwraca Regpattern.test (input_str);

Wyjście

Powyższe dane wyjściowe akceptuje znaki specjalne lub ograniczniki na wejściu, w tym aparaty ortodonty. Wyświetla błąd, podczas gdy znak (+) jest używany na wejściu.

Wzór regularnego do sprawdzania poprawności numerów telefonów za pomocą wszystkich ograniczeń, w tym Dash (-), Brackets (), kropka (.), Przestrzenie i (+) znak
Regex do sprawdzania poprawności numerów telefonów za pomocą 10 cyfr i znaków specjalnych Braces (), Dash (-), kropka (.), znak plus (+) i przestrzeń:

/^[\+]?[(]?[0-9] 3 [)]?[-\S\.]?[0-9] 3 [-\ s \.]?[0-9] 4 $/

Wzór pokazuje:

• "^„Oznacza początek łańcucha
• "/„Postać cięcia do przodu służy do wskazania granic wyrażenia regularnego
• "D”Oznacza cyfry
• "”Wskazuje limit
• "[-]”Wskazuje dozwolony charakter specjalny
• "[(]?”Oznacza również, jak dozwolone w wejściu
• "\S„Oznacza przestrzeń
• "\.”Wskazuje DOT
• "\„Postać odwrotna jest postać ucieczki
• "$„Oznacza koniec łańcucha

Użyj powyższego wzoru w „foneregex ()„Zdefiniowana funkcja:

funkcja foneregex (input_str)
var regpattern = /^[\+]?[(]?[0-9] 3 [)]?[-\S\.]?[0-9] 3 [-\ s \.]?[0-9] 4 $/;
zwraca Regpattern.test (input_str);

Wyjście

Skompilowaliśmy wszystkie możliwe wzorce wyrażeń lub wyrażenia regularne do sprawdzania poprawności numerów telefonów.

Wniosek

Korzystanie z wyrażeń regularnych w JavaScript jest najprostszym sposobem walidacji numerów telefonów. Istnieje wiele kontroli, które programista może zastosować na numer telefonu za pomocą Regex. Czeki mogą być tylko liczbami lub liczbami z znakami specjalnymi lub ogranicznikami, w tym krewacki, aparaty ortodontyczne, kropki, przestrzenie i znak plus. To badanie wyjaśnia różne wyrażenia regularne, które mogą potwierdzić numer telefonu w JavaScript.