Érvényesítse a telefonszámokat a JavaScriptben reguláris kifejezésekkel

Bevezetés

Akár észreveszi, akár nem, az adatok mindennapi életünk döntő részévé váltak. Az online ételrendeléstől a macskaeledel kereséséig folyamatosan küldünk és fogadunk adatokat. Webalkalmazások fejlesztőiként a mi felelősségünk annak biztosítása, hogy a felhasználói bemenetek a megadott formátumban legyenek, hogy az adatbázis helyesen értelmezze az adatokat, és az alkalmazás robusztus maradjon.

A telefonszám érvényesítése azért fontos, mert biztosítja, hogy az adatok konzisztens formátumban kerüljenek mentésre az adatbázisban. Például előfordulhat, hogy a felhasználóknak tisztázni kell, hogy be kell-e írniuk az országkódot a telefonszámuk elé. A megfelelő érvényesítéssel a felhasználók könnyen eldönthetik, hogy szükség van-e rá. Hasonlóképpen a felhasználói élmény is javul konzisztens formátum esetén, mivel tudja, mit várhat el a felhasználóktól, és ennek megfelelően tudja megvalósítani a logikát. Rossz élményt jelentene a felhasználók számára, ha a kód egy későbbi szakaszban megszakadna az inkonzisztens adatok miatt.

A reguláris kifejezések hatékony eszközök a mintaillesztéshez. Rugalmasságot biztosítanak a különféle típusú minták összeillesztéséhez, az Ön használati esetétől függően. Ezenkívül a reguláris kifejezések nyelv-agnosztikusak, így az érvényesítési logika hordozhatóbbá válik, mivel könnyedén integrálhatja az alapvető érvényesítést. A regex használata JavaScriptben egyszerű feladat.

Ez a cikk segít megérteni, hogyan használhatja fel a reguláris kifejezések erejét az alkalmazás telefonszámainak ellenőrzésére. Egy egyszerű JavaScript függvényt kell írnia a telefonszámok országkódokkal történő érvényesítéséhez.

Mi az a reguláris kifejezés?

Egyszerűen fogalmazva, egy reguláris kifejezés megfelel egy adott karakterlánc előre meghatározott mintájának. Széles körben használják a programozási nyelvekben, és elsősorban egy adott formátumú bemenetek érvényesítésére használják. Ezenkívül a reguláris kifejezéseket gyakran használják meghatározott minták keresésére, felosztására és helyettesítésére.

Tegyük fel, hogy egy e-mail címet szeretne találni egy dokumentumban. Az e-mail cím bármilyen cím lehet, nem egy konkrét. Egy egyszerű kifejezés írása segít gyorsan megtalálni a mintát, mivel már ismeri az e-mail cím szerkezetét.

A reguláris kifejezések speciális karaktereket használnak a különböző típusú minták jelölésére. Például:

• . (pont) egy speciális karakter, amely bármilyen karakterrel megegyezhet.
• * (csillag) 0 vagy többször megegyezik az előző karakterrel.
• + (plusz) egy vagy többször megegyezik az előző karakterrel.
• ? (kérdőjel) az előző karaktert nem kötelezővé teszi.
• [abc] megfelel bármelyik karakternek a, bvagy c.
• (abc) csoportosítja a karaktereket.
• ^ (caret) megegyezik a sor elejével.
• $ (dollár) megegyezik a sor végével.

Ez csak néhány. Ha mélyebbre szeretne merülni, és több mintát szeretne megtudni, akkor hivatkozzon rá ezt a dokumentumot a Microsofttól.

Készítsünk egy reguláris kifejezést, amely ellenőrzi, hogy egy adott számkészlet ötjegyű irányítószám-e. A kifejezés írásának megkezdéséhez használjuk a ^ (caret) jel, mivel a sor elejére illeszkedik. Egy reguláris kifejezésben d megfelel bármely számjegynek és a kapcsos zárójelben lévő számnak ({}) pontosan annyiszor felel meg az előző elemnek, ahányszor a kapcsos zárójelben szerepel. A fenti listából ezt tudjuk $ a sor végének egyeztetésére szolgál.

Ezeket az információkat kombinálva egy ehhez hasonló reguláris kifejezést kapunk:

/^d{5}$/

Most vizsgáljuk meg az alábbi ábrát, hogy jobban megértsük a kifejezést.

Reguláris kifejezés az ötjegyű irányítószámhoz

Most, hogy alapvető ismeretekkel rendelkezünk a reguláris kifejezésekről és általános felépítésükről, itt az ideje annak megvizsgálására, hogy ezek a kifejezések hogyan implementálhatók JavaScript-függvényben.

JavaScript reguláris kifejezések

A JavaScript az legnépszerűbb programozási nyelv fejlesztők között. Mivel szinte minden webalkalmazáshoz JavaScript szükséges, nagyon fontos megérteni, hogyan használhatók a reguláris kifejezések ezen a nyelven.

JavaScriptben az RegExp objektumot a mintaillesztésre használják. Ez az objektum kétféleképpen használható:

• Szó szerinti jelölés használata, ahol a minta két perjel között van formázva
• Konstruktor jelölés használata, ahol vagy egy karakterlánc vagy a RegExp objektum átadásra került

A szó szerinti jelölés egyszerűen használható:

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

Másrészt a konstruktor jelöléssel használnia kell a RegExp konstruktort, hogy létrehozzon belőle egy példányt. Így néz ki:

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

A RegExp objektumról bővebben itt olvashat hivatalos MDN dokumentumok. Most pedig vizsgáljuk meg a telefonszám-ellenőrzés fontosságát és a telefonszám különféle összetevőit.

Telefonszám ellenőrzése és összetevői

A telefonszámok ügyféloldali érvényesítése kulcsfontosságú a telefonszámok adatbázisba mentésekor. Megfelelő ellenőrzés nélkül a kód váratlan viselkedést mutathat.

Tegyük fel például, hogy olyan szolgáltatást használ, amelyhez a telefonszámmal együtt az országkódot is meg kell adni, de a felhasználók nem veszik fel őket az érvényesítés hiánya miatt. Most már csak a számod van nélkül az országkódot, és egy SMS-t küldő szolgáltatás emiatt meghibásodhat. Ez csak egy hipotetikus forgatókönyv. Más problémák akár összeomlhatják az alkalmazást. Kulcsfontosságú, hogy megfelelően kezelje adatait a frontendben, biztosítva, hogy tiszta és konzisztens adatokat mentsen az adatbázisban.

Általában egy telefonszám négy részből áll:

• Országkód: Az első 1-3 számjegy (országtól függően) határozza meg a telefonszám országát. Ez a kód lehetővé teszi, hogy a hívást a megfelelő országba irányítsák. Az országkód nem kezdődhet 0-val.

A jelenleg szerkesztett cikk a „Telefonszámok ellenőrzése JavaScriptben reguláris kifejezésekkel” címet viseli. A szerkesztendő szövegrész:

• Körzetszám: Más néven város vagy hívószám, a számnak ez a része segít a hívást az országon belül a megfelelő földrajzi területre irányítani. Egyes országokban, például az Egyesült Államokban, a körzetszámok egy adott szolgáltatáshoz tartozó telefonszámokat is jelezhetnek. Ezenkívül Észak-Amerikában a körzetszám nem kezdődhet 0-val vagy 1-gyel.
• Telefon előtag: Ezt a számsort a telefontársaság egy adott központi irodához vagy telefonközponthoz rendeli, tovább szűkítve az adott földrajzi területet vagy környéket.
• Vonalszám: Ez az egyedi telefonszám, amely egy háztartás vagy vállalkozás adott telefonvonalához van hozzárendelve az előhívó területen belül. A számnak ez a része általában biztosítja, hogy egy országon, területen és előtagon belül minden telefonszám egyedi legyen.

Az országhívószám kivételével a fennmaradó részek összevonása egy tízjegyű telefonszámot eredményez, ahol a körzetszám és a telefon előhívószáma három-, a vonal száma pedig négyjegyű.

Térjünk át egy JavaScript-függvény írására, amely reguláris kifejezések használatával e feltételek alapján érvényesíti a telefonszámot.

Hozzon létre egy reguláris kifejezést a telefonszámok ellenőrzéséhez

A telefonszámok alapvető szerkezetét már megértettük. Megismertük a reguláris kifejezéseket és azt is, hogyan használhatók a JavaScriptben. Ebben a részben írunk egy egyszerű JavaScript függvényt, amely érvényesíti az adott formátumú telefonszámokat:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Például a funkciónk érvényes telefonszáma ilyen lesz +123-456-789-1234, De nem +012-123-456-7890 or +12-123-456-789, mivel ezek a telefonszámok nem követik a korábban tárgyalt telefonszámokra vonatkozó szabályokat.

Most ugorjunk a reguláris kifejezés írásába. Először is ellenőrizzük, hogy az országkód 1–3 számjegy hosszú-e, és nem nullával kezdődik-e.

A reguláris kifejezés kezdetének jelzéséhez használjon egy mutatót (^), majd ellenőrizze, hogy van-e plusz az elején. Erre a célra használjuk +, ami megegyezik azzal, hogy a plusz az elején létezik. Most, hogy megbizonyosodjunk arról, hogy az országkód számjegyei egy és három számjegy közé esnek, és az első számjegy ne legyen nulla, írhatunk valami ilyesmit: [1-9]{1}[0-9]{0,2}. Itt, [1-9]{1} meghatározza, hogy bármely 1 és 9 közötti számjegy pontosan egyszer létezhet, és ehhez hasonlóan, [0-9]{0,2} azt jelzi, hogy bármely 0 és 9 közötti számjegy nullától kétszer előfordulhat.

Az elválasztóhoz hozzáadhatunk a - (kötőjel) a szám szakaszai között. Egy - az országkód érvényesítése után adható hozzá. Tehát ezen a ponton a reguláris kifejezés így néz ki:

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

A $ a végén a sor végét határozza meg. Nos, a körzetszámnál ez nagyon hasonló lesz. A körzetszám nem kezdődhet nullával vagy eggyel. Szóval az első rész lesz [2-9]{1}. Ez azt jelenti, hogy az első szám 2 és 9 között van. Ez az egyezés egyszer fordul elő. Ezután a kód többi részét írhatjuk [0-9]{2}. Ez biztosítja, hogy pontosan két számjegy legyen az első után, és minden számjegynél a tartomány 0 és 9 között legyen. Ismét adja hozzá a kötőjel elválasztót a végéhez.

Most a teljes reguláris kifejezés így fog kinézni:

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

Használjuk ismét ugyanazt a mintát a telefon előtag ellenőrzésére. Tegyük fel, hogy a telefon előtag sem kezdődhet nullával vagy eggyel. Szóval hozzátéve [2-9]{1}[0-9]{2} és egy kötőjel ismét a következőképpen alakítja ki a kifejezést:

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

Már csak a sorszám maradt hátra, amely bármely pontosan négyes számjegy lehet. Ez egyszerűbb, mint a többi. A kifejezés az [0-9]{4}.

A teljes kifejezés a következő:

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

Biztosan észrevetted a göndör fogszabályzó gyakori használatát. Ezeket a kapcsos zárójelben található példányokhoz használják. Ha ez egy konkrét számjegy, pl {1}, akkor pontosan egyszer fog megegyezni az előző mintával. Ha azonban tartományról van szó, pl {0, 2}, ez határozza meg az egyezések minimális és maximális számát. Tehát abban az esetben {0, 2}, akkor legalább nulla alkalommal és legfeljebb kétszer egyezik a mintával.

A minta készen áll. Most már írhatunk egy egyszerű JavaScript függvényt, amellyel ellenőrizhetjük, hogy egy telefonszám érvényes-e a reguláris kifejezés használatával. Íme a funkció:

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

A funkció meglehetősen egyszerű. Bemenetként egy telefonszámot vesz igénybe. A reguláris kifejezés mintáját egy változóban tároljuk pattern. A mintát a RegExp konstruktor használja, és a kifejezést paraméterként adja át a konstruktornak. Ezután teszteljük a telefonszámot a test az objektumban elérhető módszer. If-else utasítással ellenőrizzük, hogy a telefonszám megfelel-e a teszten. Ha igen, akkor true értéket adunk vissza, és konzolüzenetet küldünk arról, hogy a Phone number is valid. Ellenkező esetben hamis értéket ad vissza, és egy konzolüzenetet jelenít meg, amely jelzi, hogy a telefonszám érvénytelen.

Ezzel már indulhatunk is. Most tesztelheti telefonszámait, hogy megtudja, érvényesek-e.

Összegzésként

Ennek a cikknek az volt a célja, hogy rövid áttekintést nyújtson a reguláris kifejezésekről, azok használatáról, valamint arról, hogyan használhatók a telefonszámok érvényesítésére. Megbeszéltük a telefonszámok különféle összetevőit és az egyes összetevők tesztelésének módját is.

A reguláris kifejezések alapvető megértésével most további mintákat fedezhet fel. Használhat olyan eszközöket is, mint pl regex101 a kifejezések online érvényesítéséhez.

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• EVM Finance. Egységes felület a decentralizált pénzügyekhez. Hozzáférés itt.
• Quantum Media Group. IR/PR erősített. Hozzáférés itt.
• PlatoAiStream. Web3 adatintelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/