Preverjanje telefonskih številk v JavaScriptu z regularnimi izrazi

Ponovno objavil Platon

Spremljevalci: 0

Predstavitev

Ne glede na to, ali se tega zavedate ali ne, so podatki postali ključni del našega vsakdana. Od spletnega naročanja hrane do iskanja mačje hrane nenehno pošiljamo in prejemamo podatke. Kot razvijalci spletnih aplikacij smo odgovorni zagotoviti, da so uporabniški vnosi v določenem formatu, tako da zbirka podatkov pravilno razume podatke in aplikacija ostane robustna.

Preverjanje telefonske številke je pomembno, saj zagotavlja, da so podatki shranjeni v dosledni obliki v celotni bazi podatkov. Uporabniki bodo na primer morda potrebovali pojasnilo, ali naj vnesejo kodo države pred svojo telefonsko številko. Z ustreznim preverjanjem lahko uporabniki preprosto ugotovijo, ali je to potrebno. Podobno se uporabniška izkušnja izboljša z doslednim formatom, saj veste, kaj lahko pričakujete od uporabnikov, in lahko ustrezno implementirate logiko. Za uporabnike bi bila slaba izkušnja, če bi se koda pozneje zaradi nedoslednih podatkov pokvarila.

Regularni izrazi so zmogljiva orodja za ujemanje vzorcev. Zagotavljajo prilagodljivost za ujemanje vzorcev različnih vrst, odvisno od vašega primera uporabe. Poleg tega so regularni izrazi neodvisni od jezika, zaradi česar je vaša validacijska logika bolj prenosljiva, saj lahko preprosto integrirate jedro validacije. Delo z regularnim izrazom v JavaScriptu je enostavna naloga.

Ta članek vam bo pomagal razumeti, kako uporabiti moč regularnih izrazov za preverjanje telefonskih številk za vašo aplikacijo. Napisali boste preprosto funkcijo JavaScript za preverjanje telefonskih številk s kodami držav.

Kaj je regularni izraz?

Preprosto povedano, regularni izraz se ujema z vnaprej določenim vzorcem v danem nizu. Široko se uporablja v programskih jezikih in se uporablja predvsem za preverjanje vnosov določenega formata. Poleg tega se regularni izrazi običajno uporabljajo za iskanje, razdelitev in zamenjavo določenih vzorcev.

Recimo, da želite najti e-poštni naslov v dokumentu. E-poštni naslov je lahko kateri koli naslov, ne določen. Če napišete preprost izraz, boste hitro našli vzorec, saj strukturo e-poštnega naslova že poznate.

Regularni izraz uporablja posebne znake za označevanje različnih vrst vzorcev. Na primer:

. (pika) je poseben znak, ki se lahko ujema s katerim koli znakom.
* (zvezdica) se ujema s predhodnim znakom 0 ali večkrat.
+ (plus) se enkrat ali večkrat ujema s predhodnim znakom.
? (vprašaj) naredi predhodni znak neobvezen.
[abc] se ujema s katerim koli znakom a, bali c.
(abc) skupine znakov skupaj.
^ (karet) se ujema z začetkom vrstice.
$ (dolar) se ujema s koncem vrstice.

To je le nekaj. Če se želite poglobiti in spoznati več vzorcev, se lahko obrnete na ta Microsoftov dokument.

Sestavimo regularni izraz, ki preverja, ali je dani niz številk petmestna poštna številka. Za začetek pisanja izraza bomo uporabili ^ (karet), saj se ujema z začetkom vrstice. V regularnem izrazu d se ujema s katero koli števko in številko v zavitih oklepajih ({}) se ujema s predhodnim elementom natanko tolikokrat, kot je navedeno znotraj oklepajev. Iz zgornjega seznama to vemo $ se uporablja za ujemanje konca vrstice.

Če združimo te podatke, dobimo regularni izraz, kot je ta:

/^d{5}$/

Zdaj pa preglejmo spodnjo grafiko, da bomo bolje razumeli izraz.

Regularni izraz za ujemanje s petmestno poštno številko

Zdaj, ko imamo osnovno razumevanje regularnih izrazov in njihove splošne zgradbe, je pravi čas, da raziščemo, kako je mogoče te izraze implementirati v funkcijo JavaScript.

Regularni izrazi JavaScript

JavaScript je najbolj priljubljen programski jezik med razvijalci. Ker skoraj vse spletne aplikacije potrebujejo JavaScript, je ključnega pomena razumeti, kako se lahko regularni izrazi uporabljajo v tem jeziku.

V JavaScriptu je RegExp predmet se uporablja za ujemanje vzorcev. Ta predmet je mogoče uporabiti na dva načina:

Uporaba dobesednega zapisa, kjer je vzorec oblikovan med dvema poševnicama naprej
Uporaba zapisa konstruktorja, kjer je niz ali a RegExp predmet je mimo

Dobesedni zapis se lahko uporablja preprosto kot ta:

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

Po drugi strani pa boste pri notaciji konstruktorja morali uporabiti RegExp konstruktor za ustvarjanje njegovega primerka. Tako je videti:

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

Več o objektu RegExp lahko preberete na uradni dokumenti MDN. Zdaj pa raziščimo pomen preverjanja telefonske številke in različnih komponent telefonske številke.

Preverjanje telefonske številke in komponente

Preverjanje telefonskih številk na strani odjemalca je ključnega pomena pri shranjevanju telefonskih številk v vaši bazi podatkov. Brez ustreznega preverjanja veljavnosti se lahko vaša koda vede nepričakovano.

Oglejte si naš praktični, praktični vodnik za učenje Gita z najboljšimi praksami, standardi, sprejetimi v panogi, in priloženo goljufijo. Nehajte Googlati ukaze Git in pravzaprav naučiti it!

Recimo, da uporabljate storitev, ki poleg telefonske številke zahteva tudi kodo države, vendar jih vaši uporabniki ne vključijo zaradi pomanjkanja potrditve. Zdaj imate samo številko brez kodo države in storitev, ki pošilja besedilna sporočila SMS, lahko zaradi tega odpove. To je le en hipotetičen scenarij. Druge težave lahko celo zrušijo vašo aplikacijo. Ključnega pomena je pravilno ravnanje s podatki v sprednjem delu, s čimer zagotovite, da v svoji zbirki podatkov shranite čiste in dosledne podatke.

Na splošno je telefonska številka sestavljena iz štirih delov:

Koda države: Prve 1 do 3 številke (odvisno od države) določajo državo telefonske številke. Ta koda omogoča preusmeritev klica v pravo državo. Koda države se ne sme začeti z 0.

Članek, ki ga trenutno urejate, ima naslov »Preverjanje telefonskih številk v JavaScriptu z regularnimi izrazi«. Del besedila za urejanje:

Območna koda: znan tudi kot mesto ali klicna koda, ta del številke pomaga usmeriti klic na pravo geografsko območje v državi. V nekaterih državah, na primer v Združenih državah, lahko območne kode označujejo tudi določen niz telefonskih številk za določeno storitev. Poleg tega se v Severni Ameriki območna koda ne more začeti z 0 ali 1.
Telefonska predpona: To zaporedje številk dodeli telefonsko podjetje določeni centrali ali telefonski centrali, kar dodatno zoži določeno geografsko območje ali sosesko.
Številka linije: To je edinstvena številka, dodeljena določeni telefonski liniji za gospodinjstvo ali podjetje znotraj območja predpone. Ta del številke običajno zagotavlja, da je vsaka telefonska številka znotraj države, območja in predpone edinstvena.

Če izključimo kodo države, z združevanjem preostalih delov dobimo desetmestno telefonsko številko, kjer sta območna koda in telefonska predpona trimestni, številka vrstice pa štirimestna.

Zdaj pa preidimo na pisanje funkcije JavaScript, ki potrdi telefonsko številko na podlagi teh meril z uporabo regularnih izrazov.

Ustvarite RegEx za preverjanje telefonske številke

Osnovno strukturo telefonske številke smo že razumeli. Spoznali smo tudi regularne izraze in kako jih je mogoče uporabiti v JavaScriptu. V tem razdelku bomo napisali preprosto funkcijo JavaScript, ki preverja telefonske številke danega formata:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Na primer, veljavna telefonska številka za našo funkcijo bo takšna +123-456-789-1234, Vendar ne +012-123-456-7890 or +12-123-456-789, saj te telefonske številke ne upoštevajo pravil o telefonskih številkah, o katerih smo govorili prej.

Zdaj pa preidimo na pisanje regularnega izraza. Najprej preverimo, ali je koda države dolga od 1 do 3 števk in se ne začne z ničlo.

Če želite označiti začetek regularnega izraza, uporabite kazalko (^), nato potrdite, da na začetku obstaja plus. V ta namen uporabimo +, kar se bo ujemalo s tem, da plus obstaja na začetku. Da bi zagotovili, da so števke kode države med enim in tremi števkami in da prva številka ni nič, lahko zapišemo nekaj takega: [1-9]{1}[0-9]{0,2}. Tukaj, [1-9]{1} določa, da lahko katera koli številka od 1 do 9 obstaja natanko enkrat, in podobno, [0-9]{0,2} označuje, da lahko katera koli številka od 0 do 9 obstaja od nič do dvakrat.

Za ločilo lahko dodamo a - (vezaj) med deli številke. ena - lahko dodate po potrditvi kode države. Torej, na tej točki je regularni izraz videti takole:

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

O $ na koncu določa konec vrstice. Za območno kodo bo to precej podobno. Območna koda se ne sme začeti z ničlo ali enico. Torej, prvi del bo [2-9]{1}. To se ujema s tem, da je prva številka med 2 in 9. To ujemanje se zgodi enkrat. Nato lahko pišemo za preostanek kode [0-9]{2}. To bo zagotovilo, da bosta za prvim natanko dve števki, za vsako števko pa bo razpon med 0 in 9. Ponovno dodajte ločilo za vezaj na koncu.

Sedaj bo celoten regularni izraz videti takole:

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

Ponovno uporabimo isti vzorec za preverjanje telefonske predpone. Predpostavimo, da se tudi telefonska predpona ne more začeti z ničlo ali enico. Torej, dodajanje [2-9]{1}[0-9]{2} in ponovno vezaj bo izraz naredil takole:

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

Edini preostali del je številka vrstice, ki je lahko katera koli številka z dolžino natanko štiri. To je enostavnejše od drugih. Izraz je [0-9]{4}.

Celoten izraz je naslednji:

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

Gotovo ste opazili pogosto uporabo zavitih oklepajev. Uporabljajo se za ujemanje primerkov znotraj oklepaja. Če je določena številka, npr {1}, se bo natančno enkrat ujemal s prejšnjim vzorcem. Vendar, če je razpon, npr {0, 2}, določa najmanjše in največje število zadetkov. Torej, v primeru {0, 2}, se bo ujemal z vzorcem najmanj ničkrat in največ dvakrat.

Vzorec je pripravljen. Zdaj lahko napišemo preprosto funkcijo JavaScript za preverjanje, ali je telefonska številka veljavna z uporabo regularnega izraza. Tukaj je funkcija:

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

Funkcija je precej enostavna. Za vnos potrebuje telefonsko številko. Vzorec regularnega izraza je shranjen znotraj spremenljivke, imenovane pattern. Vzorec je instanciran z uporabo konstruktorja RegExp in posredovanjem izraza kot parametra konstruktorju. Nato preizkusimo telefonsko številko z uporabo test metoda, ki je na voljo v objektu. S stavkom if-else preverimo, ali telefonska številka prestane test. Če se, vrnemo true in pošljemo konzolno sporočilo, ki navaja, da je Phone number is valid. V nasprotnem primeru vrne false in prikaže sporočilo konzole, ki nakazuje, da telefonska številka ni veljavna.

S tem smo pripravljeni. Zdaj lahko preizkusite svoje telefonske številke, da vidite, ali so veljavne.

Povzetek

Namen tega članka je bil zagotoviti kratek pregled regularnih izrazov, njihove uporabe in kako jih je mogoče uporabiti za preverjanje telefonskih številk. Razpravljali smo tudi o različnih komponentah telefonske številke in o tem, kako je mogoče vsako komponento preizkusiti.

Z osnovnim razumevanjem regularnih izrazov lahko zdaj raziskujete dodatne vzorce. Uporabite lahko tudi orodja, kot je regex101 za potrjevanje vaših izrazov na spletu.