Valider telefonnumre i JavaScript med regulære udtryk

Genudgivet af Platon

Abonnenter: 0

Introduktion

Uanset om du indser det eller ej, er data blevet en afgørende del af vores daglige liv. Fra at bestille mad online til at søge efter kattefoder, sender og modtager vi konstant data. Som udviklere af webapplikationer er det vores ansvar at sikre, at brugerinput er i det angivne format, så databasen forstår dataene korrekt, og applikationen forbliver robust.

Telefonnummervalidering er vigtigt, fordi det sikrer, at data gemmes i et ensartet format i hele databasen. For eksempel kan brugere have brug for en afklaring om, hvorvidt de skal indtaste landekoden før deres telefonnummer. Med korrekt validering på plads kan brugerne nemt afgøre, om det er påkrævet. På samme måde forbedres brugeroplevelsen med et ensartet format, da du ved, hvad du kan forvente af brugerne og kan implementere logik derefter. Det ville være en dårlig oplevelse for brugerne, hvis koden går i stykker på et senere tidspunkt på grund af inkonsistente data.

Regulære udtryk er kraftfulde værktøjer til mønstermatchning. De giver fleksibiliteten til at matche mønstre af forskellige typer, afhængigt af din anvendelse. Derudover er regulære udtryk sprogagnostiske, hvilket gør din valideringslogik mere bærbar, da du nemt kan integrere kernevalideringen. At arbejde med regex i JavaScript er en ligetil opgave.

Denne artikel hjælper dig med at forstå, hvordan du bruger styrken af regulære udtryk til at validere telefonnumre til din applikation. Du vil skrive en simpel JavaScript-funktion til at validere telefonnumre med landekoder.

Hvad er et regulært udtryk?

Enkelt sagt matcher et regulært udtryk et foruddefineret mønster i en given streng. Det er meget udbredt i programmeringssprog og bruges primært til at validere input af et specifikt format. Desuden bruges regulære udtryk almindeligvis til at søge, opdele og erstatte specificerede mønstre.

Lad os sige, at du vil finde en e-mailadresse i et dokument. E-mailadressen kan være en hvilken som helst adresse, ikke en specifik. At skrive et simpelt udtryk vil hjælpe dig med at finde mønsteret hurtigt, da du allerede kender strukturen af en e-mailadresse.

Et regulært udtryk bruger specialtegn til at angive forskellige typer mønstre. For eksempel:

. (dot) er et specialtegn, der kan matche ethvert tegn.
* (stjerne) matcher det foregående tegn 0 eller flere gange.
+ (plus) matcher det foregående tegn en eller flere gange.
? (spørgsmålstegn) gør det foregående tegn valgfrit.
[abc] matcher enhver af karaktererne a, b eller c.
(abc) grupperer karakterer sammen.
^ (caret) matcher starten af linjen.
$ (dollar) svarer til slutningen af linjen.

Disse er blot nogle få. Hvis du vil dykke dybere og lære om flere mønstre, kan du henvise til dette dokument fra Microsoft.

Lad os bygge et regulært udtryk, der kontrollerer, om et givet sæt tal er et femcifret postnummer. For at begynde at skrive udtrykket bruger vi ^ (caret) tegn, da det matcher starten af linjen. I et regulært udtryk, d matcher ethvert ciffer og et tal inden for krøllede parenteser ({}) matcher det foregående element nøjagtigt det antal gange, der er givet inde i klammerne. Fra listen ovenfor ved vi det $ bruges til at matche slutningen af linjen.

Ved at kombinere disse oplysninger får vi et regulært udtryk som dette:

/^d{5}$/

Lad os nu undersøge grafikken nedenfor for bedre at forstå udtrykket.

Regulært udtryk, der matcher femcifret postnummer

Nu hvor vi har en grundlæggende forståelse af regulære udtryk og deres generelle konstruktion, er det et godt tidspunkt at undersøge, hvordan disse udtryk kan implementeres i en JavaScript-funktion.

JavaScript regulære udtryk

JavaScript er mest populære programmeringssprog blandt udviklere. Da næsten alle webapplikationer kræver JavaScript, er det afgørende at forstå, hvordan regulære udtryk kan bruges på dette sprog.

I JavaScript er RegExp objekt bruges til mønstermatchning. Dette objekt kan bruges på to måder:

Brug af bogstavelig notation, hvor et mønster er formateret mellem to skråstreger
Brug af konstruktørnotation, hvor enten en streng eller en RegExp objekt er bestået

Bogstavelig notation kan bruges så simpelt som dette:

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

På den anden side, med konstruktørnotation, skal du bruge RegExp konstruktør for at oprette en instans af det. Sådan ser det ud:

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

Du kan læse mere om RegExp-objektet fra officielle MDN-dokumenter. Lad os nu undersøge vigtigheden af validering af telefonnummer og de forskellige komponenter i et telefonnummer.

Telefonnummervalidering og komponenter

Validering af telefonnumre på klientsiden er afgørende, når du gemmer telefonnumre i din database. Uden korrekt validering kan din kode udvise uventet adfærd.

Tjek vores praktiske, praktiske guide til at lære Git, med bedste praksis, brancheaccepterede standarder og inkluderet snydeark. Stop med at google Git-kommandoer og faktisk lærer det!

Antag for eksempel, at du bruger en tjeneste, der kræver landekoden sammen med telefonnummeret, men dine brugere medtager dem ikke på grund af manglende validering. Nu har du kun nummeret uden landekoden, og en tjeneste, der sender SMS-beskeder, kan mislykkes på grund af dette. Dette er blot et hypotetisk scenarie. Andre problemer kan endda nedbryde din applikation. Det er afgørende at håndtere dine data korrekt i frontend, og sikre at du gemmer rene og konsistente data på tværs af din database.

Generelt består et telefonnummer af fire dele:

Landekode: De første 1 til 3 cifre (afhængigt af landet) definerer landet for telefonnummeret. Denne kode gør det muligt at dirigere opkaldet til det rigtige land. En landekode kan ikke starte med et 0.

Artiklen, du er ved at redigere i øjeblikket, har titlen "Valider telefonnumre i JavaScript med regulære udtryk". Den del af tekst, der skal redigeres:

Områdenummer: Denne del af nummeret, også kendt som byen eller opkaldskoden, hjælper med at dirigere opkaldet til det korrekte geografiske område i landet. I nogle lande, som f.eks. USA, kan områdekoder også angive et bestemt sæt telefonnumre for en bestemt tjeneste. Derudover kan et områdenummer i Nordamerika ikke starte med et 0 eller et 1.
Telefonpræfiks: Denne sekvens af numre tildeles et specifikt centralkontor eller telefoncentral af telefonselskabet, hvilket yderligere indsnævrer det specifikke geografiske område eller kvarter.
Linjenummer: Dette er det unikke nummer, der er tildelt den specifikke telefonlinje for en husstand eller virksomhed inden for præfiksområdet. Denne del af nummeret sikrer normalt, at hvert telefonnummer inden for et land, område og præfiks er unikt.

Bortset fra landekoden, resulterer kombinationen af de resterende dele i et ti-cifret telefonnummer, hvor områdenummeret og telefonpræfikset hver er tre cifre, og linjenummeret er fire cifre.

Lad os nu gå videre til at skrive en JavaScript-funktion, der validerer et telefonnummer baseret på disse kriterier ved hjælp af regulære udtryk.

Opret et RegEx til validering af telefonnummer

Vi har allerede forstået den grundlæggende struktur af et telefonnummer. Vi har også lært om regulære udtryk, og hvordan de kan bruges i JavaScript. I dette afsnit vil vi skrive en simpel JavaScript-funktion, der validerer telefonnumre i det givne format:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

For eksempel vil et gyldigt telefonnummer til vores funktion være sådan +123-456-789-1234, Men ikke +012-123-456-7890 or +12-123-456-789, da disse telefonnumre ikke følger reglerne for telefonnumre, vi diskuterede tidligere.

Lad os nu gå i gang med at skrive det regulære udtryk. Lad os først tjekke, om landekoden er 1 til 3 cifre lang og ikke starter med et nul.

For at angive starten på det regulære udtryk skal du bruge en streg (^), valider derefter, at der er et plus ved starten. Til dette formål, lad os bruge +, som vil matche, at plusset eksisterer i starten. For nu at sikre, at landekodens cifre er mellem et til tre cifre, og det første ciffer ikke er nul, kan vi skrive noget som dette: [1-9]{1}[0-9]{0,2}. Her, [1-9]{1} specificerer, at ethvert ciffer fra 1 til 9 kan eksistere nøjagtigt én gang, og på samme måde, [0-9]{0,2} angiver, at ethvert ciffer fra 0 til 9 kan eksistere nul til to gange.

Til separatoren kan vi tilføje en - (bindestreg) mellem sektionerne af nummeret. En - kan tilføjes efter landekodevalideringen. Så på dette tidspunkt ser regexet sådan ud:

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

$ ved slutningen angiver slutningen af linjen. Nu, for områdenummeret, vil dette være ret ens. Et områdenummer kan ikke starte med et nul eller et. Så den første del bliver [2-9]{1}. Dette matcher, at det første tal er mellem 2 og 9. Denne matchning sker én gang. Så kan vi skrive resten af koden [0-9]{2}. Dette vil sikre, at der er præcis to cifre efter det første, og for hvert ciffer er intervallet mellem 0 og 9. Igen skal du tilføje bindestregen til sidst.

Nu vil det komplette regexp se sådan ud:

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

Lad os igen bruge det samme mønster til at kontrollere telefonpræfikset. Lad os antage, at telefonpræfikset heller ikke kan starte med et nul eller et. Så tilføjer [2-9]{1}[0-9]{2} og en bindestreg igen vil gøre udtrykket sådan:

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

Den eneste del, der er tilbage nu, er linjenummeret, som kan være et hvilket som helst ciffer med en længde på præcis fire. Dette er enklere end de andre. Udtrykket er [0-9]{4}.

Det komplette udtryk er som følger:

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

Du må have bemærket den hyppige brug af krøllede seler. De bruges til at matche de forekomster, der findes inde i bøjlen. Hvis det er et bestemt ciffer, f.eks {1}, vil det matche det foregående mønster nøjagtigt én gang. Men hvis det er en række, f.eks {0, 2}, definerer det minimum og maksimum antal matches. Altså i tilfælde af {0, 2}, vil det matche mønsteret minimum nul gange og maksimalt to gange.

Mønsteret er klar. Vi kan nu skrive en simpel JavaScript-funktion for at kontrollere, om et telefonnummer er gyldigt ved hjælp af det regulære udtryk. Her er funktionen:

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

Funktionen er ret ligetil. Det tager et telefonnummer som input. Det regulære udtryksmønster er gemt inde i en variabel kaldet pattern. Mønsteret instansieres ved hjælp af RegExp-konstruktøren og sender udtrykket som en parameter til konstruktøren. Derefter tester vi telefonnummeret ved hjælp af test metode tilgængelig i objektet. Ved hjælp af en if-else-erklæring tjekker vi, om telefonnummeret består testen. Hvis det gør det, returnerer vi true og sender en konsolmeddelelse om, at Phone number is valid. Ellers returnerer den falsk og viser en konsolmeddelelse, der angiver, at telefonnummeret ikke er gyldigt.

Med dette er vi godt i gang. Nu kan du teste dine telefonnumre for at se, om de er gyldige.

Resumé

Denne artikel havde til formål at give et kort overblik over regulære udtryk, deres anvendelser, og hvordan de kan anvendes til at validere telefonnumre. Vi diskuterede også de forskellige komponenter i et telefonnummer, og hvordan hver komponent kan testes.

Med en grundlæggende forståelse af regulære udtryk kan du nu udforske yderligere mønstre. Du kan også bruge værktøjer som f.eks Regex101 for at validere dine udtryk online.