Kinnitage telefoninumbrid JavaScriptis regulaaravaldistega

Sissejuhatus

Olenemata sellest, kas te mõistate seda või mitte, on andmetest saanud meie igapäevaelu oluline osa. Alates internetist toidu tellimisest kuni kassitoidu otsimiseni saadame ja saame pidevalt andmeid. Veebirakenduste arendajatena on meie kohustus tagada, et kasutajate sisendid oleksid määratud formaadis, et andmebaas saaks andmetest õigesti aru ja rakendus püsiks töökindel.

Telefoninumbri kinnitamine on oluline, kuna see tagab andmete salvestamise ühtses vormingus kogu andmebaasis. Näiteks võivad kasutajad vajada selgitust selle kohta, kas nad peaksid oma telefoninumbri ette sisestama riigikoodi. Nõuetekohase valideerimise korral saavad kasutajad hõlpsasti kindlaks teha, kas see on vajalik. Samamoodi paraneb kasutajakogemus järjepideva vorminguga, kuna teate, mida kasutajatelt oodata, ja saate loogikat vastavalt rakendada. See oleks kasutajatele halb kogemus, kui kood katkeb hilisemas etapis vastuoluliste andmete tõttu.

Regulaaravaldised on võimsad tööriistad mustrite sobitamiseks. Need pakuvad paindlikkust erinevat tüüpi mustrite sobitamiseks, olenevalt teie kasutusjuhtumist. Lisaks on regulaaravaldised keeleagnostilised, muutes teie valideerimisloogika kaasaskantavamaks, kuna saate põhivalideerimise hõlpsalt integreerida. JavaScriptis regexiga töötamine on lihtne ülesanne.

See artikkel aitab teil mõista, kuidas kasutada regulaaravaldiste võimsust rakenduse telefoninumbrite kinnitamiseks. Telefoninumbrite riigikoodidega kinnitamiseks kirjutate lihtsa JavaScripti funktsiooni.

Mis on regulaaravaldis?

Lihtsamalt öeldes sobib regulaaravaldis etteantud stringis etteantud mustriga. Seda kasutatakse laialdaselt programmeerimiskeeltes ja seda kasutatakse peamiselt konkreetse vormingu sisendite valideerimiseks. Lisaks kasutatakse regulaaravaldisi tavaliselt määratud mustrite otsimiseks, tükeldamiseks ja asendamiseks.

Oletame, et soovite leida dokumendist e-posti aadressi. Meiliaadress võib olla mis tahes aadress, mitte konkreetne. Lihtsa väljendi kirjutamine aitab teil mustri kiiresti leida, kuna teate juba e-posti aadressi struktuuri.

Regulaaravaldis kasutab eri tüüpi mustrite tähistamiseks erimärke. Näiteks:

• . (punkt) on erimärk, mis võib ühtida mis tahes tähemärgiga.
• * (tärn) vastab eelnevale märgile 0 või enam korda.
• + (pluss) vastab eelmisele märgile üks või mitu korda.
• ? (küsimärk) muudab eelneva märgi valikuliseks.
• [abc] sobib mõne tähemärgiga a, bvõi c.
• (abc) rühmitab tegelased kokku.
• ^ (caret) sobib rea algusega.
• $ (dollar) vastab rea lõppu.

Need on vaid mõned. Kui soovite sukelduda sügavamale ja õppida rohkemate mustrite kohta, võite viidata see dokument Microsoftilt.

Koostame regulaaravaldise, mis kontrollib, kas antud numbrite komplekt on viiekohaline sihtnumber. Väljendi kirjutamise alustamiseks kasutame ^ (caret) märk, kuna see sobib rea algusega. Regulaaravaldises d vastab mis tahes numbrile ja lokkis sulgudes olevale numbrile ({}) vastab eelnevale elemendile täpselt nii palju kordi, kui palju sulgudes on antud. Ülaltoodud loendist teame seda $ kasutatakse rea lõpu sobitamiseks.

Selle teabe kombineerimisel saame sellise regulaaravaldise:

/^d{5}$/

Nüüd uurime allolevat graafikat, et väljendit paremini mõista.

Regulaaravaldis, mis sobib viiekohalise sihtnumbriga

Nüüd, kui meil on põhiteadmised regulaaravaldistest ja nende üldisest ülesehitusest, on õige aeg uurida, kuidas saab neid avaldisi JavaScripti funktsioonis rakendada.

JavaScripti regulaaravaldised

JavaScript on kõige populaarsem programmeerimiskeel arendajate seas. Kuna peaaegu kõik veebirakendused nõuavad JavaScripti, on ülioluline mõista, kuidas selles keeles regulaaravaldisi kasutada.

JavaScriptis on RegExp objekti kasutatakse mustri sobitamiseks. Seda objekti saab kasutada kahel viisil:

• Kasutades sõnasõnalist tähistust, kus muster vormindatakse kahe kaldkriipsu vahele
• Kasutades konstruktori tähistust, kus kas string või a RegExp objekt on läbitud

Literaalset tähistust saab kasutada nii lihtsalt:

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

Teisest küljest peate konstruktori tähistusega kasutama RegExp konstruktorit selle eksemplari loomiseks. See näeb välja järgmiselt:

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

RegExp objekti kohta saate lisateavet lehelt ametlikud MDN-i dokumendid. Nüüd uurime telefoninumbri valideerimise tähtsust ja telefoninumbri erinevaid komponente.

Telefoninumbri valideerimine ja komponendid

Telefoninumbrite andmebaasi salvestamisel on telefoninumbrite kinnitamine kliendi poolel ülioluline. Ilma nõuetekohase valideerimiseta võib teie kood ilmneda ootamatult.

Oletame näiteks, et kasutate teenust, mis nõuab riigikoodi ja telefoninumbrit, kuid teie kasutajad ei lisa neid valideerimise puudumise tõttu. Nüüd on teil ainult number ilma riigikood ja SMS-tekstsõnumeid saatev teenus võib seetõttu ebaõnnestuda. See on vaid üks hüpoteetiline stsenaarium. Muud probleemid võivad isegi teie rakenduse krahhi põhjustada. Ülioluline on oma andmeid õigesti käsitseda kasutajaliideses, tagades, et salvestate oma andmebaasis puhtaid ja järjepidevaid andmeid.

Üldjuhul koosneb telefoninumber neljast osast:

• Riigikood: esimesed 1 kuni 3 numbrit (olenevalt riigist) määravad telefoninumbri riigi. See kood võimaldab kõne suunata õigesse riiki. Riigikood ei tohi alata 0-ga.

Artikli, mida praegu redigeerite, pealkiri on "Telefoninumbrite kinnitamine JavaScriptis regulaaravaldistega". Redigeeritav tekstilõik:

• Suunakood: tuntud ka kui linn või suunakood, see numbri osa aitab suunata kõne riigi õigesse geograafilisse piirkonda. Mõnes riigis, nagu Ameerika Ühendriigid, võivad suunakoodid näidata ka konkreetse teenuse jaoks kindlat telefoninumbrite komplekti. Lisaks ei saa Põhja-Ameerikas suunakood alata 0 või 1-ga.
• Telefoni eesliide: telefonifirma määrab selle numbrijada konkreetsele keskkontorile või telefonijaamale, kitsendades konkreetset geograafilist piirkonda või naabruskonda veelgi.
• Liin number: see on kordumatu number, mis on määratud konkreetsele telefoniliinile eesliidepiirkonnas asuva leibkonna või ettevõtte jaoks. See numbriosa tagab tavaliselt, et iga telefoninumber riigis, piirkonnas ja eesliites on kordumatu.

Kui riigikood välja jätta, siis ülejäänud osade kombineerimisel saadakse kümnekohaline telefoninumber, kus suunakood ja telefoni eesliide on kumbki kolmekohalised ning liini number on neljakohaline.

Liigume nüüd JavaScripti funktsiooni kirjutamisse, mis kontrollib telefoninumbrit nende kriteeriumide alusel regulaaravaldiste abil.

Looge telefoninumbri kinnitamiseks regEx

Oleme juba mõistnud telefoninumbri põhistruktuuri. Samuti oleme õppinud tundma regulaaravaldisi ja seda, kuidas neid JavaScriptis kasutada. Selles jaotises kirjutame lihtsa JavaScripti funktsiooni, mis kinnitab antud vormingus telefoninumbreid:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Näiteks on meie funktsiooni jaoks kehtiv telefoninumber selline +123-456-789-1234, Kuid mitte +012-123-456-7890 or +12-123-456-789, kuna need telefoninumbrid ei järgi telefoninumbrite reegleid, millest me varem rääkisime.

Liigume nüüd regulaaravaldise kirjutamisse. Esmalt kontrollime, kas riigikood on 1–3 koha pikkune ega alga nulliga.

Regulaaravaldise alguse näitamiseks kasutage tähist (^), seejärel kinnitage, et pluss on alguses olemas. Selleks kasutame +, mis vastab sellele, et pluss on alguses olemas. Nüüd, tagamaks, et riigikoodi numbrid on vahemikus üks kuni kolm numbrit ja esimene number ei oleks null, võime kirjutada midagi sellist: [1-9]{1}[0-9]{0,2}. Siin, [1-9]{1} määrab, et iga number vahemikus 1 kuni 9 võib esineda täpselt üks kord ja samamoodi, [0-9]{0,2} näitab, et iga number vahemikus 0 kuni 9 võib esineda nullist kaheni.

Eraldaja jaoks võime lisada a - (sidekriips) numbri osade vahel. Üks - saab lisada pärast riigikoodi kinnitamist. Sel hetkel näeb regex välja järgmine:

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

. $ lõpus määrab rea lõpu. Nüüd on see suunakoodi puhul üsna sarnane. Suunakood ei saa alata nulliga ega ühega. Niisiis, esimene osa saab olema [2-9]{1}. See vastab sellele, et esimene arv on vahemikus 2 kuni 9. See sobitamine toimub üks kord. Seejärel saame ülejäänud koodi jaoks kirjutada [0-9]{2}. See tagab, et esimese numbri järel on täpselt kaks numbrit ja iga numbri vahemik on vahemikus 0 kuni 9. Jällegi lisage lõppu sidekriipsu eraldaja.

Nüüd näeb täielik regexp välja selline:

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

Kasutame taas sama mustrit telefoni eesliite kontrollimiseks. Oletame, et ka telefoni eesliide ei saa alata nulliga ega ühega. Niisiis, lisades [2-9]{1}[0-9]{2} ja sidekriips muudab väljendi selliseks:

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

Ainus osa, mis on praegu alles, on rea number, mis võib olla mis tahes number, mille pikkus on täpselt neli. See on lihtsam kui teised. Väljend on [0-9]{4}.

Täielik väljend on järgmine:

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

Kindlasti olete märganud lokkis trakside sagedast kasutamist. Neid kasutatakse klambri sees olevate eksemplaride sobitamiseks. Kui see on konkreetne number, näiteks {1}, ühtib see täpselt ühe korra eelmise mustriga. Kui see on aga vahemik, nt {0, 2}, määrab see vastete minimaalse ja maksimaalse arvu. Niisiis, juhul {0, 2}, sobib see mustriga vähemalt null korda ja maksimaalselt kaks korda.

Muster on valmis. Nüüd saame kirjutada lihtsa JavaScripti funktsiooni, et kontrollida, kas telefoninumber on regulaaravaldise abil kehtiv. Siin on funktsioon:

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

Funktsioon on üsna lihtne. See võtab sisendiks telefoninumbri. Regulaaravaldise muster salvestatakse muutujas nimega pattern. Muster luuakse RegExp konstruktori abil ja avaldise parameetrina edasiandmine konstruktorile. Seejärel testime telefoninumbrit kasutades test objektil saadaval olev meetod. Kui-else lause abil kontrollime, kas telefoninumber läbib testi. Kui see nii on, tagastame tõese ja saadame konsoolisõnumi, mis kinnitab, et Phone number is valid. Vastasel juhul tagastab see vale ja kuvab konsooli teate, mis näitab, et telefoninumber ei kehti.

Sellega on meil hea minna. Nüüd saate testida oma telefoninumbreid, et näha, kas need kehtivad.

kokkuvõte

Selle artikli eesmärk oli anda lühike ülevaade regulaaravaldistest, nende kasutusviisidest ja nende kasutamisest telefoninumbrite kinnitamiseks. Arutasime ka telefoninumbri erinevaid komponente ja seda, kuidas iga komponenti saab testida.

Regulaaravaldiste põhiteadmistega saate nüüd uurida täiendavaid mustreid. Võite kasutada ka selliseid tööriistu nagu regex101 oma väljendite kinnitamiseks võrgus.

• SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
• EVM Finance. Detsentraliseeritud rahanduse ühtne liides. Juurdepääs siia.
• Quantum Media Group. IR/PR võimendatud. Juurdepääs siia.
• PlatoAiStream. Web3 andmete luure. Täiustatud teadmised. Juurdepääs siia.
• Allikas: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/