Valider telefonnumre i JavaScript med regulære uttrykk

Publisert av Platon

Følgere: 0

Introduksjon

Enten du innser det eller ikke, har data blitt en avgjørende del av vårt daglige liv. Fra å bestille mat på nett til å søke etter kattemat, sender og mottar vi hele tiden data. Som utviklere av webapplikasjoner er det vårt ansvar å sørge for at brukerinndata er i spesifisert format slik at databasen forstår dataene riktig, og applikasjonen forblir robust.

Telefonnummervalidering er viktig fordi det sikrer at data lagres i et konsistent format i hele databasen. For eksempel kan brukere trenge avklaring på om de skal angi landskoden før telefonnummeret. Med riktig validering på plass kan brukere enkelt finne ut om det er nødvendig. På samme måte forbedres brukeropplevelsen med et konsistent format, ettersom du vet hva du kan forvente av brukere og kan implementere logikk deretter. Det vil være en dårlig opplevelse for brukerne hvis koden bryter på et senere tidspunkt på grunn av inkonsistente data.

Regulære uttrykk er kraftige verktøy for mønstermatching. De gir fleksibiliteten til å matche mønstre av ulike typer, avhengig av din brukssituasjon. I tillegg er regulære uttrykk språkagnostiske, noe som gjør valideringslogikken din mer bærbar, siden du enkelt kan integrere kjernevalideringen. Å jobbe med regex i JavaScript er en enkel oppgave.

Denne artikkelen vil hjelpe deg å forstå hvordan du bruker kraften til regulære uttrykk for å validere telefonnumre for applikasjonen din. Du vil skrive en enkel JavaScript-funksjon for å validere telefonnumre med landskoder.

Hva er et regulært uttrykk?

Enkelt sagt samsvarer et regulært uttrykk med et forhåndsdefinert mønster i en gitt streng. Det er mye brukt i programmeringsspråk og brukes først og fremst for å validere inndata i et spesifikt format. Videre er regulære uttrykk ofte brukt for å søke, dele og erstatte spesifiserte mønstre.

La oss si at du vil finne en e-postadresse i et dokument. E-postadressen kan være en hvilken som helst adresse, ikke en spesifikk. Å skrive et enkelt uttrykk vil hjelpe deg å finne mønsteret raskt siden du allerede kjenner strukturen til en e-postadresse.

Et regulært uttrykk bruker spesialtegn for å angi ulike typer mønstre. For eksempel:

. (prikk) er et spesialtegn som kan matche alle tegn.
* (stjerne) samsvarer med det foregående tegnet 0 eller flere ganger.
+ (pluss) samsvarer med det foregående tegnet én eller flere ganger.
? (spørsmålstegn) gjør det foregående tegnet valgfritt.
[abc] samsvarer med noen av karakterene a, beller c.
(abc) grupperer karakterer sammen.
^ (caret) matcher starten på linjen.
$ (dollar) samsvarer med slutten av linjen.

Dette er bare noen få. Ønsker du å dykke dypere og lære om flere mønstre, kan du henvise til dette dokumentet fra Microsoft.

La oss bygge et regulært uttrykk som sjekker om et gitt sett med tall er et femsifret postnummer. For å begynne å skrive uttrykket bruker vi ^ (caret)-skilt, da det samsvarer med starten på linjen. I et regulært uttrykk, d samsvarer med et hvilket som helst siffer, og et tall innenfor krøllete klammeparenteser ({}) samsvarer med det foregående elementet nøyaktig antall ganger gitt inne i klammeparentesene. Fra listen ovenfor vet vi det $ brukes for å matche slutten av linjen.

Ved å kombinere denne informasjonen får vi et regulært uttrykk som dette:

/^d{5}$/

La oss nå undersøke grafikken nedenfor for å bedre forstå uttrykket.

Regelmessig uttrykk for å matche femsifret postnummer

Regulært uttrykk for å matche femsifret postnummer

Nå som vi har en grunnleggende forståelse av regulære uttrykk og deres generelle konstruksjon, er det et godt tidspunkt å utforske hvordan disse uttrykkene kan implementeres i en JavaScript-funksjon.

JavaScript-regulære uttrykk

JavaScript er mest populære programmeringsspråket blant utviklere. Siden nesten alle nettapplikasjoner krever JavaScript, er det avgjørende å forstå hvordan regulære uttrykk kan brukes på dette språket.

I JavaScript er RegExp objektet brukes til mønstertilpasning. Dette objektet kan brukes på to måter:

Bruker bokstavelig notasjon, der et mønster er formatert mellom to skråstreker fremover
Bruke konstruktørnotasjon, der enten en streng eller en RegExp objektet er passert

Bokstavelig notasjon kan brukes så enkelt som dette:

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

På den annen side, med konstruktørnotasjon, må du bruke RegExp konstruktør for å lage en forekomst av den. Slik ser det ut:

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

Du kan lese mer om RegExp-objektet fra offisielle MDN-dokumenter. La oss nå utforske viktigheten av validering av telefonnummer og de ulike komponentene i et telefonnummer.

Telefonnummervalidering og komponenter

Validering av telefonnumre på klientsiden er avgjørende når du lagrer telefonnumre i databasen. Uten riktig validering kan koden din vise uventet oppførsel.

Sjekk ut vår praktiske, praktiske guide for å lære Git, med beste praksis, bransjeaksepterte standarder og inkludert jukseark. Slutt å google Git-kommandoer og faktisk lære den!

Anta for eksempel at du bruker en tjeneste som krever landskoden sammen med telefonnummeret, men brukerne dine inkluderer dem ikke på grunn av manglende validering. Nå har du bare nummeret uten landskoden, og en tjeneste som sender SMS-tekstmeldinger kan mislykkes på grunn av dette. Dette er bare ett hypotetisk scenario. Andre problemer kan til og med krasje applikasjonen din. Det er avgjørende å håndtere dataene dine riktig i frontend, og sikre at du lagrer rene og konsistente data på tvers av databasen.

Vanligvis består et telefonnummer av fire deler:

Landskode: De første 1 til 3 sifrene (avhengig av land) definerer landet for telefonnummeret. Denne koden gjør at samtalen kan rutes til riktig land. En landskode kan ikke starte med 0.

Artikkelen du redigerer for øyeblikket har tittelen "Valider telefonnumre i JavaScript med regulære uttrykk". Tekstbiten som skal redigeres:

Retningsnummer: Denne delen av nummeret, også kjent som byen eller retningsnummeret, hjelper til med å rute anropet til riktig geografisk område i landet. I noen land, som USA, kan retningsnummer også indikere et spesifikt sett med telefonnumre for en bestemt tjeneste. I Nord-Amerika kan heller ikke et retningsnummer starte med 0 eller 1.
Telefonprefiks: Denne nummersekvensen tilordnes et bestemt sentralkontor eller telefonsentral av telefonselskapet, og begrenser det spesifikke geografiske området eller nabolaget ytterligere.
Linjenummer: Dette er det unike nummeret som er tildelt den spesifikke telefonlinjen for en husholdning eller bedrift innenfor prefiksområdet. Denne delen av nummeret sikrer vanligvis at hvert telefonnummer innenfor et land, område og prefiks er unikt.

Utenom landskoden, vil en kombinasjon av de resterende delene resultere i et tisifret telefonnummer der retningsnummeret og telefonprefikset er tre sifre hver, og linjenummeret er fire sifre.

La oss nå gå over til å skrive en JavaScript-funksjon som validerer et telefonnummer basert på disse kriteriene ved å bruke regulære uttrykk.

Opprett et regulært uttrykk for validering av telefonnummer

Vi har allerede forstått den grunnleggende strukturen til et telefonnummer. Vi har også lært om regulære uttrykk og hvordan de kan brukes i JavaScript. I denne delen vil vi skrive en enkel JavaScript-funksjon som validerer telefonnumre i det gitte formatet:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

For eksempel vil et gyldig telefonnummer for vår funksjon være slik +123-456-789-1234, Men ikke +012-123-456-7890 or +12-123-456-789, siden disse telefonnumrene ikke følger reglene for telefonnumre vi diskuterte tidligere.

La oss nå begynne å skrive det vanlige uttrykket. Først, la oss sjekke om landskoden er 1 til 3 sifre lang og ikke starter med en null.

For å indikere starten på det regulære uttrykket, bruk en indikator (^), valider deretter at det finnes et pluss ved starten. For dette formålet, la oss bruke +, som vil samsvare med at plusset eksisterer i starten. Nå, for å sikre at landskodens sifre er mellom ett til tre sifre og det første sifferet ikke er null, kan vi skrive noe slikt: [1-9]{1}[0-9]{0,2}. Her, [1-9]{1} spesifiserer at ethvert siffer fra 1 til 9 kan eksistere nøyaktig én gang, og på samme måte, [0-9]{0,2} indikerer at ethvert siffer fra 0 til 9 kan eksistere null til to ganger.

For separatoren kan vi legge til en - (bindestrek) mellom delene av tallet. En - kan legges til etter landskodevalideringen. Så på dette tidspunktet ser regex slik ut:

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

De $ på slutten angir slutten av linjen. Nå, for retningsnummeret, vil dette være ganske likt. Et retningsnummer kan ikke starte med en null eller en. Så den første delen blir [2-9]{1}. Dette samsvarer med at det første tallet er mellom 2 og 9. Denne matchingen skjer én gang. Så, for resten av koden, kan vi skrive [0-9]{2}. Dette vil sikre at det er nøyaktig to sifre etter det første, og for hvert siffer er området mellom 0 og 9. Igjen, legg til bindestrekskilletegn på slutten.

Nå vil hele regexp se slik ut:

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

La oss igjen bruke det samme mønsteret for å sjekke telefonprefikset. La oss anta at telefonprefikset heller ikke kan starte med en null eller en. Så, legger til [2-9]{1}[0-9]{2} og en bindestrek igjen vil gjøre uttrykket slik:

^+[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 delen som gjenstår nå er linjenummeret, som kan være et hvilket som helst siffer med en lengde på nøyaktig fire. Dette er enklere enn de andre. Uttrykket er [0-9]{4}.

Det komplette uttrykket 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å ha lagt merke til den hyppige bruken av krøllete seler. De brukes til å matche forekomstene som er gitt inne i bøylen. Hvis det er et spesifikt siffer, som {1}, vil det samsvare med det foregående mønsteret nøyaktig én gang. Men hvis det er en rekkevidde, som {0, 2}, definerer minimum og maksimum antall treff. Så, i tilfelle av {0, 2}, vil det matche mønsteret minimum null ganger og maksimalt to ganger.

Mønsteret er klart. Vi kan nå skrive en enkel JavaScript-funksjon for å sjekke om et telefonnummer er gyldig ved å bruke det regulære uttrykket. Her er funksjonen:

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

Funksjonen er ganske grei. Det tar et telefonnummer som input. Det regulære uttrykksmønsteret er lagret inne i en variabel kalt pattern. Mønsteret instansieres ved å bruke RegExp-konstruktøren og sender uttrykket som en parameter til konstruktøren. Deretter tester vi telefonnummeret ved å bruke test metode tilgjengelig i objektet. Ved å bruke en if-else-erklæring sjekker vi om telefonnummeret består testen. Hvis den gjør det, returnerer vi true og sender en konsollmelding som sier at Phone number is valid. Ellers returnerer den falsk og viser en konsollmelding som indikerer at telefonnummeret ikke er gyldig.

Med dette er vi godt i gang. Nå kan du teste telefonnumrene dine for å se om de er gyldige.

Oppsummering

Denne artikkelen hadde som mål å gi en kort oversikt over regulære uttrykk, deres bruk og hvordan de kan brukes for å validere telefonnumre. Vi diskuterte også de ulike komponentene i et telefonnummer og hvordan hver komponent kan testes.

Med en grunnleggende forståelse av regulære uttrykk kan du nå utforske flere mønstre. Du kan også bruke verktøy som regex101 for å validere uttrykkene dine på nettet.