Valideer telefoonnummers in JavaScript met reguliere expressies

Introductie

Of u het nu beseft of niet, gegevens zijn een cruciaal onderdeel van ons dagelijks leven geworden. Van het online bestellen van voer tot het zoeken naar kattenvoer, we verzenden en ontvangen voortdurend gegevens. Als ontwikkelaars van webapplicaties is het onze verantwoordelijkheid om ervoor te zorgen dat gebruikersinvoer in het gespecificeerde formaat is, zodat de database de gegevens correct begrijpt en de applicatie robuust blijft.

Telefoonnummervalidatie is belangrijk omdat het ervoor zorgt dat gegevens in de hele database in een consistent formaat worden opgeslagen. Gebruikers kunnen bijvoorbeeld verduidelijking nodig hebben over de vraag of ze de landcode vóór hun telefoonnummer moeten invoeren. Met de juiste validatie kunnen gebruikers eenvoudig bepalen of dit vereist is. Evenzo verbetert de gebruikerservaring met een consistent formaat, omdat u weet wat u van gebruikers kunt verwachten en dienovereenkomstig logica kunt implementeren. Het zou een slechte ervaring zijn voor gebruikers als de code in een later stadium breekt vanwege inconsistente gegevens.

Reguliere expressies zijn krachtige hulpmiddelen voor het matchen van patronen. Ze bieden de flexibiliteit om patronen van verschillende typen te matchen, afhankelijk van uw gebruikssituatie. Bovendien zijn reguliere expressies taalonafhankelijk, wat uw validatielogica draagbaarder maakt, aangezien u eenvoudig de kernvalidatie kunt integreren. Werken met regex in JavaScript is een eenvoudige taak.

Dit artikel helpt u te begrijpen hoe u de kracht van reguliere expressies kunt gebruiken om telefoonnummers voor uw toepassing te valideren. Je schrijft een eenvoudige JavaScript-functie om telefoonnummers met landcodes te valideren.

Wat is een reguliere expressie?

Eenvoudig gezegd komt een reguliere expressie overeen met een vooraf gedefinieerd patroon in een gegeven tekenreeks. Het wordt veel gebruikt in programmeertalen en wordt voornamelijk gebruikt voor het valideren van invoer van een specifiek formaat. Bovendien worden reguliere expressies vaak gebruikt voor het zoeken, splitsen en vervangen van gespecificeerde patronen.

Stel dat u een e-mailadres in een document wilt vinden. Het e-mailadres kan elk adres zijn, niet een specifiek adres. Door een eenvoudige uitdrukking te schrijven, kunt u het patroon snel vinden, aangezien u de structuur van een e-mailadres al kent.

Een reguliere expressie gebruikt speciale tekens om verschillende typen patronen aan te duiden. Bijvoorbeeld:

• . (punt) is een speciaal teken dat met elk teken kan overeenkomen.
• * (asterisk) komt 0 keer of vaker overeen met het voorgaande teken.
• + (plus) komt één of meerdere keren overeen met het voorgaande teken.
• ? (vraagteken) maakt het voorafgaande teken optioneel.
• [abc] komt overeen met een van de personages a, bof c.
• (abc) groepeert karakters bij elkaar.
• ^ (caret) komt overeen met het begin van de regel.
• $ (dollar) komt overeen met het einde van de regel.

Dit zijn er maar een paar. Als je dieper wilt duiken en meer patronen wilt leren, kun je verwijzen naar dit document van Microsoft.

Laten we een reguliere expressie bouwen die controleert of een bepaalde reeks getallen een vijfcijferige postcode is. Om te beginnen met het schrijven van de uitdrukking, gebruiken we de ^ (caret) teken, omdat het overeenkomt met het begin van de regel. In een reguliere expressie, d komt overeen met elk cijfer en een getal tussen accolades ({}) komt overeen met het voorgaande element precies het aantal keren dat tussen de accolades staat. Dat weten we uit bovenstaande lijst $ wordt gebruikt voor het matchen van het einde van de regel.

Door deze informatie te combineren, krijgen we een reguliere expressie zoals deze:

/^d{5}$/

Laten we nu de onderstaande afbeelding bekijken om de uitdrukking beter te begrijpen.

Reguliere uitdrukking die overeenkomt met vijfcijferige postcode

Nu we een basiskennis hebben van reguliere expressies en hun algemene constructie, is het een goed moment om te onderzoeken hoe deze expressies kunnen worden geïmplementeerd in een JavaScript-functie.

JavaScript-reguliere expressies

JavaScript is de meest populaire programmeertaal onder ontwikkelaars. Aangezien bijna alle webapplicaties JavaScript nodig hebben, is het cruciaal om te begrijpen hoe reguliere expressies in deze taal kunnen worden gebruikt.

In JavaScript, de RegExp object wordt gebruikt voor het matchen van patronen. Dit object kan op twee manieren worden gebruikt:

• Letterlijke notatie gebruiken, waarbij een patroon wordt opgemaakt tussen twee schuine strepen
• Met behulp van constructornotatie, waarbij een tekenreeks of een RegExp voorwerp wordt doorgegeven

Letterlijke notatie kan eenvoudig als volgt worden gebruikt:

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

Aan de andere kant, met constructornotatie, moet u de RegExp constructor om er een instantie van te maken. Zo ziet het eruit:

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

U kunt meer lezen over het RegExp-object in de officiële MDN-documenten. Laten we nu eens kijken naar het belang van telefoonnummervalidatie en de verschillende componenten van een telefoonnummer.

Telefoonnummervalidatie en componenten

Het valideren van telefoonnummers aan de clientzijde is cruciaal bij het opslaan van telefoonnummers in uw database. Zonder de juiste validatie kan uw code onverwacht gedrag vertonen.

Stel dat u een service gebruikt waarvoor de landcode samen met het telefoonnummer vereist is, maar uw gebruikers nemen deze niet op vanwege een gebrek aan validatie. Nu heb je alleen het nummer zonder de landcode en een service die sms-berichten verzendt, kan hierdoor mislukken. Dit is slechts één hypothetisch scenario. Andere problemen kunnen uw applicatie zelfs laten crashen. Het is van cruciaal belang om uw gegevens in de frontend goed te verwerken, zodat u ervoor zorgt dat u schone en consistente gegevens in uw database opslaat.

Over het algemeen bestaat een telefoonnummer uit vier delen:

• Landcode: De eerste 1 tot 3 cijfers (afhankelijk van het land) definiëren het land van het telefoonnummer. Met deze code kan het gesprek naar het juiste land worden doorgeschakeld. Een landcode kan niet beginnen met een 0.

Het artikel dat u momenteel aan het bewerken bent, is getiteld "Validate telefoonnummers in JavaScript met reguliere expressies". Het stuk tekst dat moet worden bewerkt:

• Netnummer: Dit deel van het nummer, ook wel de stad of netnummer genoemd, helpt de oproep naar het juiste geografische gebied in het land te leiden. In sommige landen, zoals de Verenigde Staten, kunnen netnummers ook een specifieke reeks telefoonnummers voor een bepaalde dienst aangeven. Bovendien kan een netnummer in Noord-Amerika niet beginnen met een 0 of een 1.
• Telefoonvoorvoegsel: deze reeks nummers wordt door het telefoonbedrijf toegewezen aan een specifiek centraal kantoor of telefooncentrale, waardoor het specifieke geografische gebied of de buurt verder wordt beperkt.
• Lijnnummer: Dit is het unieke nummer dat is toegewezen aan de specifieke telefoonlijn voor een huishouden of bedrijf binnen het prefixgebied. Dit deel van het nummer zorgt er meestal voor dat elk telefoonnummer binnen een land, gebied en prefix uniek is.

Exclusief de landcode resulteert het combineren van de resterende delen in een tiencijferig telefoonnummer waarbij het netnummer en het telefoonvoorvoegsel elk uit drie cijfers bestaan ​​en het lijnnummer uit vier cijfers bestaat.

Laten we nu beginnen met het schrijven van een JavaScript-functie die een telefoonnummer valideert op basis van deze criteria met behulp van reguliere expressies.

Maak een RegEx voor telefoonnummervalidatie

We hebben de basisstructuur van een telefoonnummer al begrepen. We hebben ook geleerd over reguliere expressies en hoe ze in JavaScript kunnen worden gebruikt. In deze sectie zullen we een eenvoudige JavaScript-functie schrijven die telefoonnummers van het gegeven formaat valideert:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Een geldig telefoonnummer voor onze functie zal er bijvoorbeeld zo uitzien +123-456-789-1234, Maar niet +012-123-456-7890 or +12-123-456-789, aangezien deze telefoonnummers niet voldoen aan de regels voor telefoonnummers die we eerder hebben besproken.

Laten we nu beginnen met het schrijven van de reguliere expressie. Laten we eerst eens kijken of de landcode 1 tot 3 cijfers lang is en niet met een nul begint.

Om het begin van de reguliere expressie aan te geven, gebruikt u een dakje (^), bevestig vervolgens dat er een plus aan het begin staat. Laten we voor dit doel gebruiken +, wat overeenkomt met het feit dat de plus aan het begin bestaat. Om er zeker van te zijn dat de cijfers van de landcode tussen één en drie cijfers zijn en het eerste cijfer niet nul is, kunnen we iets als dit schrijven: [1-9]{1}[0-9]{0,2}. Hier, [1-9]{1} geeft aan dat elk cijfer van 1 tot 9 precies één keer kan bestaan, en evenzo, [0-9]{0,2} geeft aan dat elk cijfer van 0 tot 9 nul tot twee keer kan bestaan.

Voor het scheidingsteken kunnen we een toevoegen - (koppelteken) tussen de secties van het nummer. Een - kan worden toegevoegd na validatie van de landcode. Dus op dit punt ziet de regex er als volgt uit:

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

De $ aan het einde geeft het einde van de regel aan. Nu, voor het netnummer zal dit vrij gelijkaardig zijn. Een netnummer kan niet met een nul of een één beginnen. Zo, het eerste deel zal zijn [2-9]{1}. Dit komt overeen dat het eerste getal tussen 2 en 9 ligt. Deze afstemming vindt eenmalig plaats. Dan kunnen we voor de rest van de code schrijven [0-9]{2}. Dit zorgt ervoor dat er precies twee cijfers achter de eerste staan, en voor elk cijfer ligt het bereik tussen 0 en 9. Voeg opnieuw het koppelteken toe aan het einde.

Nu ziet de volledige regexp er als volgt uit:

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

Laten we opnieuw hetzelfde patroon gebruiken om het telefoonvoorvoegsel te controleren. Laten we aannemen dat het telefoonvoorvoegsel ook niet met een nul of een één kan beginnen. Dus toevoegen [2-9]{1}[0-9]{2} en opnieuw een koppelteken zal de uitdrukking als volgt maken:

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

Het enige overgebleven deel is nu het regelnummer, dat elk cijfer kan zijn met een lengte van precies vier. Dit is eenvoudiger dan de andere. De uitdrukking is [0-9]{4}.

De volledige uitdrukking is als volgt:

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

Het veelvuldige gebruik van accolades moet u zijn opgevallen. Ze worden gebruikt om overeen te komen met de instanties die binnen de accolade worden geleverd. Als het een specifiek cijfer is, zoals {1}, komt het exact één keer overeen met het voorgaande patroon. Als het echter een bereik is, zoals {0, 2}, definieert het het minimale en maximale aantal overeenkomsten. Dus in het geval van {0, 2}, komt het minimaal nul keer en maximaal twee keer overeen met het patroon.

Het patroon is klaar. We kunnen nu een eenvoudige JavaScript-functie schrijven om te controleren of een telefoonnummer geldig is met behulp van de reguliere expressie. Dit is de functie:

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

De functie is vrij eenvoudig. Er is een telefoonnummer nodig als invoer. Het patroon van de reguliere expressie wordt opgeslagen in een variabele met de naam pattern. Het patroon wordt geïnstantieerd met behulp van de RegExp-constructor en geeft de uitdrukking als een parameter door aan de constructor. Vervolgens testen we het telefoonnummer met behulp van de test beschikbare methode in het object. Met een if-else statement controleren we of het telefoonnummer de test doorstaat. Als dit het geval is, geven we 'true' terug en sturen we een consolebericht waarin staat dat het Phone number is valid. Anders retourneert het false en geeft het een consolebericht weer dat aangeeft dat het telefoonnummer niet geldig is.

Hiermee zijn we good to go. Nu kunt u uw telefoonnummers testen om te zien of ze geldig zijn.

Samengevat

Dit artikel was bedoeld om een ​​kort overzicht te geven van reguliere expressies, hun gebruik en hoe ze kunnen worden toegepast om telefoonnummers te valideren. Ook hebben we de verschillende onderdelen van een telefoonnummer besproken en hoe elk onderdeel getest kan worden.

Met een basiskennis van reguliere expressies kunt u nu aanvullende patronen verkennen. Je kunt ook tools gebruiken zoals regex101 voor het online valideren van uw uitingen.

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• EVM Financiën. Uniforme interface voor gedecentraliseerde financiën. Toegang hier.
• Quantum Media Groep. IR/PR versterkt. Toegang hier.
• PlatoAiStream. Web3 gegevensintelligentie. Kennis versterkt. Toegang hier.
• Bron: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/