Validați numerele de telefon în JavaScript cu expresii regulate

Introducere

Indiferent dacă îți dai seama sau nu, datele au devenit o parte crucială a vieții noastre de zi cu zi. De la comandarea de mâncare online până la căutarea hranei pentru pisici, trimitem și primim în mod constant date. În calitate de dezvoltatori de aplicații web, este responsabilitatea noastră să ne asigurăm că intrările utilizatorilor sunt în formatul specificat, astfel încât baza de date să înțeleagă datele corect, iar aplicația să rămână robustă.

Validarea numărului de telefon este importantă deoarece asigură că datele sunt salvate într-un format consistent în întreaga bază de date. De exemplu, utilizatorii ar putea avea nevoie de clarificări dacă ar trebui să introducă codul țării înainte de numărul lor de telefon. Cu validarea adecvată, utilizatorii pot determina cu ușurință dacă este necesar. În mod similar, experiența utilizatorului se îmbunătățește cu un format consistent, deoarece știți la ce să vă așteptați de la utilizatori și puteți implementa logica în consecință. Ar fi o experiență slabă pentru utilizatori dacă codul se rupe într-o etapă ulterioară din cauza datelor inconsecvente.

Expresiile regulate sunt instrumente puternice pentru potrivirea modelelor. Acestea oferă flexibilitatea de a potrivi modele de diferite tipuri, în funcție de cazul dvs. de utilizare. În plus, expresiile regulate sunt independente de limbaj, ceea ce face logica de validare mai portabilă, deoarece puteți integra cu ușurință validarea de bază. Lucrul cu regex în JavaScript este o sarcină simplă.

Acest articol vă va ajuta să înțelegeți cum să utilizați puterea expresiilor regulate pentru a valida numerele de telefon pentru aplicația dvs. Veți scrie o funcție JavaScript simplă pentru a valida numerele de telefon cu coduri de țară.

Ce este o expresie regulată?

În termeni simpli, o expresie regulată se potrivește cu un model predefinit într-un șir dat. Este utilizat pe scară largă în limbaje de programare și folosit în primul rând pentru validarea intrărilor unui anumit format. În plus, expresiile regulate sunt utilizate în mod obișnuit pentru căutarea, împărțirea și înlocuirea modelelor specificate.

Să presupunem că doriți să găsiți o adresă de e-mail într-un document. Adresa de e-mail poate fi orice adresă, nu una anume. Scrierea unei expresii simple vă va ajuta să găsiți rapid modelul, deoarece cunoașteți deja structura unei adrese de e-mail.

O expresie regulată folosește caractere speciale pentru a desemna diferite tipuri de modele. De exemplu:

• . (punct) este un caracter special care se poate potrivi cu orice caracter.
• * (asterisc) se potrivește cu caracterul precedent de 0 sau de mai multe ori.
• + (plus) se potrivește cu caracterul precedent o dată sau de mai multe ori.
• ? (semnul de întrebare) face ca caracterul precedent este opțional.
• [abc] se potrivește cu oricare dintre personaje a, b, Sau c.
• (abc) grupează personajele împreună.
• ^ (caret) se potrivește cu începutul liniei.
• $ (dolar) se potrivește cu sfârșitul liniei.

Acestea sunt doar câteva. Dacă doriți să vă scufundați mai adânc și să aflați despre mai multe modele, vă puteți referi la acest document de la Microsoft.

Să construim o expresie regulată care verifică dacă un anumit set de numere este un cod poștal de cinci cifre. Pentru a începe să scrieți expresia, vom folosi ^ semn (caret), deoarece se potrivește cu începutul liniei. Într-o expresie regulată, d se potrivește cu orice cifră și cu un număr din acolade ({}) se potrivește cu elementul precedent exact cu numărul de ori dat în interiorul acoladelor. Din lista de mai sus, știm asta $ este folosit pentru potrivirea sfârșitului de linie.

Combinând aceste informații, obținem o expresie regulată ca aceasta:

/^d{5}$/

Acum, să examinăm graficul de mai jos pentru a înțelege mai bine expresia.

Expresie regulată pentru a se potrivi cu codul poștal din cinci cifre

Acum că avem o înțelegere de bază a expresiilor regulate și a construcției lor generale, este un moment bun pentru a explora modul în care aceste expresii pot fi implementate într-o funcție JavaScript.

Expresii regulate JavaScript

JavaScript este cel mai popular limbaj de programare printre dezvoltatori. Deoarece aproape toate aplicațiile web necesită JavaScript, este esențial să înțelegem cum pot fi folosite expresiile regulate în acest limbaj.

În JavaScript, RegExp obiectul este folosit pentru potrivirea modelelor. Acest obiect poate fi utilizat în două moduri:

• Folosind notația literală, unde un model este formatat între două bare oblice
• Folosind notația constructorului, unde fie un șir, fie a RegExp obiectul este trecut

Notația literală poate fi folosită la fel de simplu ca acesta:

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

Pe de altă parte, cu notația de constructor, va trebui să utilizați RegExp constructor pentru a crea o instanță a acestuia. Iată cum arată:

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

Puteți citi mai multe despre obiectul RegExp din documentele oficiale MDN. Acum, să explorăm importanța validării numărului de telefon și diferitele componente ale unui număr de telefon.

Validarea numărului de telefon și componente

Validarea numerelor de telefon din partea clientului este crucială atunci când salvați numerele de telefon în baza de date. Fără o validare adecvată, codul dvs. poate prezenta comportamente neașteptate.

De exemplu, să presupunem că utilizați un serviciu care necesită codul țării împreună cu numărul de telefon, dar utilizatorii dvs. nu le includ din cauza lipsei de validare. Acum, ai doar numărul fără codul țării și un serviciu care trimite mesaje text SMS ar putea eșua din această cauză. Acesta este doar un scenariu ipotetic. Alte probleme pot chiar să vă blocheze aplicația. Este esențial să vă gestionați corect datele în interfață, asigurându-vă că salvați date curate și consecvente în baza de date.

În general, un număr de telefon este format din patru părți:

• Codul de țară: primele 1 până la 3 cifre (în funcție de țară) definesc țara numărului de telefon. Acest cod permite direcționarea apelului către țara corectă. Un cod de țară nu poate începe cu 0.

Articolul pe care îl editați în prezent este intitulat „Validați numerele de telefon în JavaScript cu expresii regulate”. Porțiunea de text de editat:

• Prefix: cunoscut și sub numele de oraș sau prefix de apelare, această parte a numărului ajută la direcționarea apelului către zona geografică corectă din țară. În unele țări, cum ar fi Statele Unite, codurile de zonă pot indica, de asemenea, un anumit set de numere de telefon pentru un anumit serviciu. În plus, în America de Nord, un prefix nu poate începe cu 0 sau 1.
• Prefix telefonic: această secvență de numere este atribuită unui anumit birou central sau centrală telefonică de către compania de telefonie, restrângând și mai mult zona geografică sau cartier specific.
• Număr de linie: acesta este numărul unic alocat liniei telefonice specifice pentru o gospodărie sau o companie din zona de prefix. Această parte a numărului asigură de obicei că fiecare număr de telefon dintr-o țară, zonă și prefix este unic.

Excluzând codul de țară, combinarea părților rămase are ca rezultat un număr de telefon din zece cifre, unde prefixul de zonă și prefixul de telefon sunt fiecare din trei cifre, iar numărul de linie este de patru cifre.

Să trecem acum la scrierea unei funcții JavaScript care validează un număr de telefon pe baza acestor criterii folosind expresii regulate.

Creați un RegEx pentru validarea numărului de telefon

Am înțeles deja structura de bază a unui număr de telefon. Am învățat, de asemenea, despre expresiile regulate și despre cum pot fi utilizate în JavaScript. În această secțiune, vom scrie o funcție JavaScript simplă care validează numerele de telefon în formatul dat:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

De exemplu, un număr de telefon valid pentru funcția noastră va fi așa +123-456-789-1234, Dar nu +012-123-456-7890 or +12-123-456-789, deoarece aceste numere de telefon nu respectă regulile numerelor de telefon despre care am discutat mai devreme.

Acum, să trecem la scrierea expresiei regulate. Mai întâi, să verificăm dacă codul de țară are 1 până la 3 cifre și nu începe cu zero.

Pentru a indica începutul expresiei obișnuite, utilizați o liniuță (^), apoi validați că există un plus la început. În acest scop, să folosim +, care se va potrivi că plusul există la început. Acum, pentru a ne asigura că cifrele codului de țară sunt între una și trei cifre și prima cifră nu este zero, putem scrie ceva de genul: [1-9]{1}[0-9]{0,2}. Aici, [1-9]{1} specifică că orice cifră de la 1 la 9 poate exista exact o dată și, în mod similar, [0-9]{0,2} indică faptul că orice cifră de la 0 la 9 poate exista de la zero la două ori.

Pentru separator, putem adăuga un - (cratima) între secțiunile numărului. unu - poate fi adăugat după validarea codului de țară. Deci, în acest moment, expresia regex arată astfel:

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

$ la sfârşit specifică sfârşitul liniei. Acum, pentru prefixul zonal, acesta va fi destul de similar. Un prefix nu poate începe cu zero sau cu unu. Deci, prima parte va fi [2-9]{1}. Aceasta se potrivește că primul număr este între 2 și 9. Această potrivire are loc o singură dată. Apoi, pentru restul codului, putem scrie [0-9]{2}. Acest lucru va asigura că există exact două cifre după prima, iar pentru fiecare cifră, intervalul este între 0 și 9. Din nou, adăugați separatorul cu cratime la sfârșit.

Acum, expresia generală completă va arăta astfel:

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

Să folosim din nou același model pentru verificarea prefixului telefonic. Să presupunem că nici prefixul de telefon nu poate începe cu zero sau unu. Deci, adăugând [2-9]{1}[0-9]{2} iar o cratima va face din nou expresia astfel:

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

Singura parte care rămâne acum este numărul liniei, care poate fi orice cifră cu o lungime de exact patru. Acesta este mai simplu decât celelalte. Expresia este [0-9]{4}.

Expresia completă este următoarea:

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

Trebuie să fi observat utilizarea frecventă a bretelelor. Ele sunt folosite pentru a se potrivi cu instanțele furnizate în interiorul bretei. Dacă este o anumită cifră, de exemplu {1}, se va potrivi cu modelul precedent exact o dată. Totuși, dacă este o gamă, cum ar fi {0, 2}, definește numărul minim și maxim de potriviri. Deci, în cazul {0, 2}, se va potrivi cu modelul de minim zero ori și maxim de două ori.

Modelul este gata. Acum putem scrie o funcție JavaScript simplă pentru a verifica dacă un număr de telefon este valid folosind expresia regulată. Iată funcția:

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

Funcția este destul de simplă. Este nevoie de un număr de telefon ca intrare. Modelul expresiei regulate este stocat într-o variabilă numită pattern. Modelul este instanțiat folosind constructorul RegExp și transmiterea expresiei ca parametru către constructor. Apoi, testăm numărul de telefon folosind test metoda disponibilă în obiect. Folosind o declarație if-else, verificăm dacă numărul de telefon trece testul. Dacă o face, returnăm true și trimitem un mesaj de consolă care să afirme că Phone number is valid. În caz contrar, returnează false și afișează un mesaj de consolă care indică faptul că numărul de telefon nu este valid.

Cu asta, suntem gata de plecare. Acum, puteți testa numerele de telefon pentru a vedea dacă sunt valide.

Rezumat

Acest articol și-a propus să ofere o scurtă prezentare generală a expresiilor regulate, a utilizărilor lor și a modului în care pot fi aplicate pentru a valida numerele de telefon. Am discutat, de asemenea, despre diferitele componente ale unui număr de telefon și despre cum poate fi testată fiecare componentă.

Cu o înțelegere de bază a expresiilor regulate, acum puteți explora modele suplimentare. De asemenea, puteți folosi instrumente precum regex101 pentru validarea expresiilor dvs. online.

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• EVM Finance. Interfață unificată pentru finanțare descentralizată. Accesați Aici.
• Grupul Quantum Media. IR/PR amplificat. Accesați Aici.
• PlatoAiStream. Web3 Data Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/