Beskrivning

Oavsett om du inser det eller inte, har data blivit en avgörande del av vårt dagliga liv. Från att beställa mat online till att söka efter kattmat, vi skickar och tar emot data hela tiden. Som utvecklare av webbapplikationer är det vårt ansvar att se till att användarinmatningar är i det angivna formatet så att databasen förstår data korrekt och applikationen förblir robust.

Validering av telefonnummer är viktigt eftersom det säkerställer att data sparas i ett konsekvent format i hela databasen. Användare kan till exempel behöva förtydliga om de ska ange landskoden före sitt telefonnummer. Med korrekt validering på plats kan användare enkelt avgöra om det krävs. På samma sätt förbättras användarupplevelsen med ett konsekvent format, eftersom du vet vad du kan förvänta dig av användare och kan implementera logik därefter. Det skulle vara en dålig upplevelse för användarna om koden går sönder i ett senare skede på grund av inkonsekventa data.

Reguljära uttryck är kraftfulla verktyg för mönstermatchning. De ger flexibiliteten att matcha mönster av olika typer, beroende på ditt användningsfall. Dessutom är reguljära uttryck språkagnostiska, vilket gör din valideringslogik mer portabel, eftersom du enkelt kan integrera kärnvalideringen. Att arbeta med regex i JavaScript är en enkel uppgift.

Den här artikeln hjälper dig att förstå hur du använder kraften i reguljära uttryck för att validera telefonnummer för din applikation. Du kommer att skriva en enkel JavaScript-funktion för att validera telefonnummer med landskoder.

Vad är ett reguljärt uttryck?

Enkelt uttryckt matchar ett reguljärt uttryck ett fördefinierat mönster i en given sträng. Det används ofta i programmeringsspråk och används främst för att validera indata i ett specifikt format. Dessutom används vanliga uttryck för att söka, dela och ersätta specificerade mönster.

Låt oss säga att du vill hitta en e-postadress i ett dokument. E-postadressen kan vara vilken adress som helst, inte en specifik. Att skriva ett enkelt uttryck hjälper dig att snabbt hitta mönstret eftersom du redan känner till strukturen för en e-postadress.

Ett reguljärt uttryck använder specialtecken för att beteckna olika typer av mönster. Till exempel:

• . (punkt) är ett specialtecken som kan matcha vilket tecken som helst.
• * (asterisk) matchar föregående tecken 0 eller fler gånger.
• + (plus) matchar föregående tecken en eller flera gånger.
• ? (frågetecken) gör det föregående tecknet valfritt.
• [abc] matchar någon av karaktärerna a, b, eller c.
• (abc) grupperar karaktärer.
• ^ (caret) matchar början av raden.
• $ (dollar) matchar slutet av raden.

Dessa är bara några. Vill du dyka djupare och lära dig om fler mönster kan du hänvisa till detta dokument från Microsoft.

Låt oss bygga ett reguljärt uttryck som kontrollerar om en given uppsättning nummer är ett femsiffrigt postnummer. För att börja skriva uttrycket använder vi ^ (caret) tecken, eftersom det matchar början av raden. I ett reguljärt uttryck, d matchar vilken siffra som helst och en siffra inom hängslen ({}) matchar det föregående elementet exakt det antal gånger som anges innanför klammerparenteserna. Från listan ovan vet vi det $ används för att matcha slutet av raden.

Genom att kombinera denna information får vi ett reguljärt uttryck så här:

/^d{5}$/

Låt oss nu undersöka grafiken nedan för att bättre förstå uttrycket.

Reguljärt uttryck för att matcha femsiffrigt postnummer

Nu när vi har en grundläggande förståelse för reguljära uttryck och deras allmänna konstruktion, är det ett bra tillfälle att utforska hur dessa uttryck kan implementeras i en JavaScript-funktion.

JavaScript reguljära uttryck

JavaScript är mest populära programmeringsspråket bland utvecklare. Eftersom nästan alla webbapplikationer kräver JavaScript är det avgörande att förstå hur reguljära uttryck kan användas på detta språk.

I JavaScript är RegExp objekt används för mönstermatchning. Detta objekt kan användas på två sätt:

• Använder bokstavlig notation, där ett mönster formateras mellan två snedstreck framåt
• Använda konstruktornotation, där antingen en sträng eller en RegExp objektet passeras

Bokstavsnotation kan användas så enkelt som detta:

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

Å andra sidan, med konstruktornotation, måste du använda RegExp konstruktor för att skapa en instans av det. Så här ser det ut:

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

Du kan läsa mer om RegExp-objektet från officiella MDN-dokument. Låt oss nu utforska vikten av validering av telefonnummer och de olika komponenterna i ett telefonnummer.

Telefonnummervalidering och komponenter

Validering av telefonnummer på klientsidan är avgörande när du sparar telefonnummer i din databas. Utan korrekt validering kan din kod uppvisa oväntade beteenden.

Anta till exempel att du använder en tjänst som kräver landskoden tillsammans med telefonnumret, men att dina användare inte inkluderar dem på grund av bristande validering. Nu har du bara numret utan landskoden, och en tjänst som skickar SMS-meddelanden kan misslyckas på grund av detta. Detta är bara ett hypotetiskt scenario. Andra problem kan till och med krascha din applikation. Det är avgörande att korrekt hantera dina data i frontend, för att säkerställa att du sparar ren och konsekvent data i din databas.

I allmänhet består ett telefonnummer av fyra delar:

• Landskod: De första 1 till 3 siffrorna (beroende på land) anger landet för telefonnumret. Denna kod gör att samtalet kan dirigeras till rätt land. En landskod kan inte börja med en 0.

Artikeln du för närvarande redigerar har titeln "Validera telefonnummer i JavaScript med reguljära uttryck". Den bit av text som ska redigeras:

• Riktnummer: Även känd som stad eller riktnummer, den här delen av numret hjälper till att dirigera samtalet till rätt geografiska område i landet. I vissa länder, som USA, kan riktnummer också indikera en specifik uppsättning telefonnummer för en viss tjänst. Dessutom, i Nordamerika kan ett riktnummer inte börja med en 0 eller en 1.
• Telefonprefix: Denna nummersekvens tilldelas ett specifikt centralkontor eller telefonväxel av telefonbolaget, vilket ytterligare begränsar det specifika geografiska området eller området.
• Linjenummer: Detta är det unika numret som tilldelats den specifika telefonlinjen för ett hushåll eller företag inom prefixområdet. Denna del av numret säkerställer vanligtvis att varje telefonnummer inom ett land, område och prefix är unikt.

Om man utesluter landsnumret resulterar en kombination av de återstående delarna i ett tiosiffrigt telefonnummer där riktnumret och telefonprefixet är tresiffriga vardera och linjenumret är fyrasiffrigt.

Låt oss nu gå vidare till att skriva en JavaScript-funktion som validerar ett telefonnummer baserat på dessa kriterier med hjälp av reguljära uttryck.

Skapa ett RegEx för validering av telefonnummer

Vi har redan förstått den grundläggande strukturen för ett telefonnummer. Vi har också lärt oss om reguljära uttryck och hur de kan användas i JavaScript. I det här avsnittet kommer vi att skriva en enkel JavaScript-funktion som validerar telefonnummer i det angivna formatet:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Till exempel kommer ett giltigt telefonnummer för vår funktion att vara så här +123-456-789-1234, Men inte +012-123-456-7890 or +12-123-456-789, eftersom dessa telefonnummer inte följer reglerna för telefonnummer som vi diskuterade tidigare.

Låt oss nu börja skriva det reguljära uttrycket. Låt oss först kontrollera om landskoden är 1 till 3 siffror lång och inte börjar med en nolla.

För att indikera början av det reguljära uttrycket, använd en indikator (^), bekräfta sedan att ett plus finns i början. För detta ändamål, låt oss använda +, vilket kommer att matcha att pluset finns i början. Nu, för att säkerställa att landskodens siffror är mellan en till tre siffror och att den första siffran inte är noll, kan vi skriva något så här: [1-9]{1}[0-9]{0,2}. Här, [1-9]{1} anger att alla siffror från 1 till 9 kan existera exakt en gång, och på liknande sätt, [0-9]{0,2} indikerar att vilken siffra som helst från 0 till 9 kan existera noll till två gånger.

För separatorn kan vi lägga till en - (bindestreck) mellan sektionerna av numret. Ett - kan läggas till efter landskodsvalideringen. Så, vid denna tidpunkt, ser regexet ut så här:

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

Smakämnen $ vid slutet anger slutet av raden. Nu, för riktnummer, kommer detta att vara ganska lika. Ett riktnummer kan inte börja med en nolla eller en etta. Så, den första delen blir [2-9]{1}. Detta stämmer överens med att den första siffran är mellan 2 och 9. Denna matchning sker en gång. Sedan, för resten av koden, kan vi skriva [0-9]{2}. Detta kommer att säkerställa att det finns exakt två siffror efter den första, och för varje siffra är intervallet mellan 0 och 9. Återigen, lägg till bindestrecksavgränsaren i slutet.

Nu kommer det fullständiga regexp att se ut så här:

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

Låt oss återigen använda samma mönster för att kontrollera telefonprefixet. Låt oss anta att telefonprefixet inte heller kan börja med en nolla eller en etta. Så, tillägger [2-9]{1}[0-9]{2} och ett bindestreck igen kommer att göra uttrycket så här:

^+[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 enda delen som återstår nu är radnumret, som kan vara vilken siffra som helst med en längd på exakt fyra. Detta är enklare än de andra. Uttrycket är [0-9]{4}.

Det fullständiga uttrycket är som följer:

^+[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åste ha märkt den frekventa användningen av lockiga hängslen. De används för att matcha instanserna som tillhandahålls inuti stag. Om det är en specifik siffra, som {1}, matchar det föregående mönster exakt en gång. Men om det är ett intervall, som {0, 2}, definierar det minsta och högsta antalet matchningar. Så i fallet med {0, 2}, kommer det att matcha mönstret minst noll gånger och högst två gånger.

Mönstret är klart. Vi kan nu skriva en enkel JavaScript-funktion för att kontrollera om ett telefonnummer är giltigt med det reguljära uttrycket. Här är 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 är ganska enkel. Det tar ett telefonnummer som inmatning. Det reguljära uttrycksmönstret lagras i en variabel som kallas pattern. Mönstret instansieras med hjälp av RegExp-konstruktorn och skickar uttrycket som en parameter till konstruktorn. Sedan testar vi telefonnumret med hjälp av test metod tillgänglig i objektet. Med hjälp av ett if-else-uttalande kontrollerar vi om telefonnumret klarar testet. Om det gör det returnerar vi true och skickar ett konsolmeddelande som säger att Phone number is valid. Annars returnerar den falskt och visar ett konsolmeddelande som indikerar att telefonnumret inte är giltigt.

Med detta är vi bra att gå. Nu kan du testa dina telefonnummer för att se om de är giltiga.

Sammanfattning

Den här artikeln syftade till att ge en kort översikt över reguljära uttryck, deras användning och hur de kan användas för att validera telefonnummer. Vi diskuterade också de olika komponenterna i ett telefonnummer och hur varje komponent kan testas.

Med en grundläggande förståelse för reguljära uttryck kan du nu utforska ytterligare mönster. Du kan också använda verktyg som regex101 för att validera dina uttryck online.

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• EVM Finans. Unified Interface for Decentralized Finance. Tillgång här.
• Quantum Media Group. IR/PR förstärkt. Tillgång här.
• PlatoAiStream. Web3 Data Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/