Vahvista puhelinnumerot JavaScriptissä säännöllisillä lausekkeilla

Julkaissut Platon

seuraajia: 0

esittely

Ymmärrätpä sen tai et, tiedoista on tullut tärkeä osa jokapäiväistä elämäämme. Lähetämme ja vastaanotamme jatkuvasti tietoja ruuan tilaamisesta verkossa kissanruoan etsimiseen. Verkkosovellusten kehittäjinä meidän vastuullamme on varmistaa, että käyttäjien syötteet ovat määritetyssä muodossa, jotta tietokanta ymmärtää tiedot oikein ja sovellus pysyy vakaana.

Puhelinnumeron vahvistaminen on tärkeää, koska se varmistaa, että tiedot tallennetaan yhdenmukaisessa muodossa koko tietokannassa. Käyttäjät saattavat esimerkiksi tarvita selvennystä siitä, pitäisikö heidän syöttää maakoodi ennen puhelinnumeroaan. Kun oikea validointi on käytössä, käyttäjät voivat helposti määrittää, tarvitaanko sitä. Vastaavasti käyttökokemus paranee johdonmukaisella muodolla, koska tiedät mitä odottaa käyttäjiltä ja voit toteuttaa logiikkaa sen mukaisesti. Käyttäjille olisi huono kokemus, jos koodi katkeaa myöhemmässä vaiheessa epäjohdonmukaisten tietojen vuoksi.

Säännölliset lausekkeet ovat tehokkaita työkaluja kuvioiden sovittamiseen. Ne tarjoavat joustavuutta erityyppisten kuvioiden yhdistämiseen käyttötapauksestasi riippuen. Lisäksi säännölliset lausekkeet ovat kielen agnostisia, mikä tekee validointilogiikasi siirrettävämmän, koska voit helposti integroida ydinvahvistuksen. Regexin käyttäminen JavaScriptissä on yksinkertaista.

Tämä artikkeli auttaa sinua ymmärtämään, kuinka voit käyttää säännöllisten lausekkeiden tehoa sovelluksesi puhelinnumeroiden vahvistamiseen. Kirjoitat yksinkertaisen JavaScript-funktion, joka vahvistaa puhelinnumerot maakoodeilla.

Mikä on säännöllinen lauseke?

Yksinkertaisesti sanottuna säännöllinen lauseke vastaa ennalta määritettyä kuviota tietyssä merkkijonossa. Sitä käytetään laajalti ohjelmointikielissä, ja sitä käytetään ensisijaisesti tietyn muodon syötteiden validointiin. Lisäksi säännöllisiä lausekkeita käytetään yleisesti tiettyjen kuvioiden etsimiseen, jakamiseen ja korvaamiseen.

Oletetaan, että haluat löytää sähköpostiosoitteen asiakirjasta. Sähköpostiosoite voi olla mikä tahansa osoite, ei tietty. Yksinkertaisen lausekkeen kirjoittaminen auttaa sinua löytämään mallin nopeasti, koska tiedät jo sähköpostiosoitteen rakenteen.

Säännöllinen lauseke käyttää erikoismerkkejä erityyppisten kuvioiden kuvaamiseen. Esimerkiksi:

. (piste) on erikoismerkki, joka voi vastata mitä tahansa merkkiä.
* (tähti) vastaa edellistä merkkiä 0 tai useammin.
+ (plus) vastaa edellistä merkkiä yhden tai useamman kerran.
? (kysymysmerkki) tekee edellisestä merkistä valinnaisen.
[abc] vastaa mitä tahansa hahmoa a, btai c.
(abc) ryhmittelee hahmot yhteen.
^ (caret) vastaa rivin alkua.
$ (dollari) vastaa rivin loppua.

Nämä ovat vain muutamia. Jos haluat sukeltaa syvemmälle ja oppia lisää malleista, voit viitata tähän tämä asiakirja Microsoftilta.

Muodostetaan säännöllinen lauseke, joka tarkistaa, onko annettu numerosarja viisinumeroinen postinumero. Aloitamme lausekkeen kirjoittamisen käyttämällä ^ (caret) -merkki, koska se vastaa rivin alkua. Säännöisessä lausekkeessa d vastaa mitä tahansa numeroa ja aaltosulkeiden sisällä olevaa numeroa ({}) vastaa edellistä elementtiä täsmälleen niin monta kertaa kuin aaltosulkeissa on annettu. Yllä olevasta luettelosta tiedämme sen $ käytetään vastaamaan rivin loppua.

Yhdistämällä nämä tiedot, saamme seuraavanlaisen säännöllisen lausekkeen:

/^d{5}$/

Tarkastellaan nyt alla olevaa kuvaa ymmärtääksemme ilmaisun paremmin.

Säännöllinen lauseke, joka vastaa viisinumeroista postinumeroa

Nyt kun meillä on perusymmärrys säännöllisistä lausekkeista ja niiden yleisestä rakenteesta, on hyvä aika tutkia, kuinka nämä lausekkeet voidaan toteuttaa JavaScript-funktiossa.

JavaScriptin säännölliset lausekkeet

JavaScript on suosituin ohjelmointikieli kehittäjien keskuudessa. Koska lähes kaikki verkkosovellukset vaativat JavaScriptin, on tärkeää ymmärtää, kuinka säännöllisiä lausekkeita voidaan käyttää tällä kielellä.

JavaScriptissä, RegExp objektia käytetään kuvioiden sovittamiseen. Tätä objektia voidaan käyttää kahdella tavalla:

Käytä kirjaimellista merkintää, jossa kuvio muotoillaan kahden vinoviivan väliin
Käyttäen konstruktorimerkintää, jossa joko merkkijono tai a RegExp kohde on ohitettu

Kirjaimellista merkintää voidaan käyttää näin yksinkertaisesti:

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

Toisaalta konstruktorimerkinnällä sinun on käytettävä RegExp rakentaja luodaksesi siitä esiintymän. Tältä se näyttää:

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

Voit lukea lisää RegExp-objektista osoitteesta viralliset MDN-asiakirjat. Tutkitaanpa nyt puhelinnumeron vahvistamisen merkitystä ja puhelinnumeron eri osia.

Puhelinnumeron vahvistus ja komponentit

Puhelinnumeroiden vahvistaminen asiakaspuolella on ratkaisevan tärkeää tallennettaessa puhelinnumeroita tietokantaan. Ilman asianmukaista vahvistusta koodisi saattaa toimia odottamattomina.

Tutustu käytännönläheiseen, käytännölliseen Gitin oppimisoppaaseemme, jossa on parhaat käytännöt, alan hyväksymät standardit ja mukana tuleva huijauslehti. Lopeta Git-komentojen googlailu ja oikeastaan oppia se!

Oletetaan esimerkiksi, että käytät palvelua, joka vaatii maakoodin ja puhelinnumeron, mutta käyttäjäsi eivät sisällytä niitä vahvistuksen puutteen vuoksi. Nyt sinulla on vain numero ilman maakoodi, ja SMS-tekstiviestejä lähettävä palvelu saattaa epäonnistua tämän vuoksi. Tämä on vain yksi hypoteettinen skenaario. Muut ongelmat voivat jopa kaataa sovelluksesi. On erittäin tärkeää käsitellä tietojasi oikein käyttöliittymässä, jotta voit tallentaa puhtaita ja johdonmukaisia tietoja koko tietokannasta.

Yleensä puhelinnumero koostuu neljästä osasta:

Maakoodi: Ensimmäiset 1-3 numeroa (maan mukaan) määrittelevät puhelinnumeron maan. Tämän koodin avulla puhelu voidaan reitittää oikeaan maahan. Maakoodi ei voi alkaa nollalla.

Tällä hetkellä muokkaamasi artikkeli on nimeltään "Vahvista puhelinnumerot JavaScriptissä säännöllisillä lausekkeilla". Muokattava tekstiosa:

Suuntanumero: Tämä numeron osa, joka tunnetaan myös nimellä kaupunki tai suuntanumero, auttaa reitittämään puhelun oikealle maantieteelliselle alueelle maassa. Joissakin maissa, kuten Yhdysvalloissa, suuntanumerot voivat myös osoittaa tietyn palvelun puhelinnumerot. Lisäksi Pohjois-Amerikassa suuntanumero ei voi alkaa 0:lla tai 1:llä.
Puhelinetuliite: Puhelinyhtiö määrittää tämän numerosarjan tietylle keskustoimistolle tai puhelinkeskukselle, mikä edelleen kaventaa tiettyä maantieteellistä aluetta tai naapurustoa.
Linjan numero: Tämä on etuliitteen alueella kotitalouden tai yrityksen tietylle puhelinlinjalle määritetty yksilöllinen numero. Tämä numeron osa varmistaa yleensä, että jokainen puhelinnumero maassa, alueella ja etuliitteessä on yksilöllinen.

Jäljelle jäävien osien yhdistäminen johtaa maakoodia lukuun ottamatta kymmennumeroiseen puhelinnumeroon, jossa suuntanumero ja puhelinnumero ovat kumpikin kolminumeroisia ja linjan numero neljä numeroa.

Siirrytään nyt JavaScript-funktion kirjoittamiseen, joka vahvistaa puhelinnumeron näiden kriteerien perusteella käyttämällä säännöllisiä lausekkeita.

Luo säännöllinen lauseke puhelinnumeron vahvistusta varten

Olemme jo ymmärtäneet puhelinnumeron perusrakenteen. Olemme myös oppineet säännöllisistä lausekkeista ja siitä, kuinka niitä voidaan käyttää JavaScriptissä. Tässä osiossa kirjoitamme yksinkertaisen JavaScript-funktion, joka vahvistaa tietyn muodon puhelinnumerot:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Esimerkiksi toimintomme kelvollinen puhelinnumero on tällainen +123-456-789-1234, Mutta ei +012-123-456-7890 or +12-123-456-789, koska nämä puhelinnumerot eivät noudata puhelinnumeroita koskevia sääntöjä, joista keskustelimme aiemmin.

Siirrytään nyt säännöllisen lausekkeen kirjoittamiseen. Tarkista ensin, onko maakoodi 1–3 numeroa pitkä ja ei ala nollalla.

Jos haluat osoittaa säännöllisen lausekkeen alun, käytä merkintämerkkiä (^), vahvista sitten, että alussa on plus. Tätä tarkoitusta varten käytetään +, joka vastaa sitä, että plus on olemassa alussa. Varmistaaksemme, että maakoodin numerot ovat yhdestä kolmeen numeroa ja että ensimmäinen numero ei ole nolla, voimme kirjoittaa jotain näin: [1-9]{1}[0-9]{0,2}. Tässä, [1-9]{1} määrittää, että mikä tahansa numero väliltä 1-9 voi esiintyä täsmälleen kerran, ja vastaavasti, [0-9]{0,2} osoittaa, että mikä tahansa numero 0-9 voi esiintyä nollasta kahteen kertaan.

Erottimeksi voimme lisätä a - (yhdysmerkki) numeron osien välissä. Yksi - voidaan lisätä maakoodin vahvistamisen jälkeen. Joten tässä vaiheessa säännöllinen lauseke näyttää tältä:

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

- $ lopussa määrittää rivin lopun. Nyt suuntanumeron osalta tämä on melko samanlainen. Suuntanumero ei voi alkaa nollalla tai ykkösellä. Ensimmäinen osa tulee siis olemaan [2-9]{1}. Tämä vastaa, että ensimmäinen numero on välillä 2 ja 9. Tämä vastaavuus tapahtuu kerran. Sitten voimme kirjoittaa loput koodista [0-9]{2}. Tämä varmistaa, että ensimmäisen numeron jälkeen on täsmälleen kaksi numeroa, ja kunkin numeron alue on välillä 0–9. Lisää yhdysviivaerotin jälleen loppuun.

Nyt täydellinen säännöllinen lauseke näyttää tältä:

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

Tarkistetaan puhelinetuliite uudelleen samalla mallilla. Oletetaan, että puhelimen etuliite ei myöskään voi alkaa nollalla tai ykkösellä. Eli lisäämällä [2-9]{1}[0-9]{2} ja yhdysviiva taas tekee lauseesta seuraavanlaisen:

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

Ainoa jäljellä oleva osa on rivinumero, joka voi olla mikä tahansa numero, jonka pituus on tasan neljä. Tämä on yksinkertaisempi kuin muut. Ilmaisu on [0-9]{4}.

Täydellinen ilmaisu on seuraava:

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

Sinun on täytynyt huomata kihara housunkannattimet usein. Niitä käytetään vastaamaan aaltosulkeen sisällä olevia tapauksia. Jos se on tietty numero, esim {1}, se vastaa edellistä kuviota täsmälleen kerran. Kuitenkin, jos se on alue, esim {0, 2}, se määrittää osumien vähimmäis- ja enimmäismäärän. Joten tapauksessa {0, 2}, se vastaa kuviota vähintään nolla kertaa ja enintään kaksi kertaa.

Malli on valmis. Voimme nyt kirjoittaa yksinkertaisen JavaScript-funktion tarkistaaksemme, onko puhelinnumero kelvollinen käyttämällä säännöllistä lauseketta. Tässä on toiminto:

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

Toiminto on melko suoraviivainen. Se ottaa syötteenä puhelinnumeron. Säännöllinen lausekekuvio on tallennettu muuttujaan nimeltä pattern. Malli instantoidaan käyttämällä RegExp-konstruktoria ja välittämällä lausekkeen parametrina rakentajalle. Sitten testaamme puhelinnumeroa käyttämällä test objektissa käytettävissä oleva menetelmä. Tarkistamme if-else-lauseen avulla, läpäiseekö puhelinnumero testin. Jos näin on, palautamme true ja lähetämme konsoliviestin, jossa kerrotaan, että Phone number is valid. Muussa tapauksessa se palauttaa epätosi ja näyttää konsoliviestin, joka osoittaa, että puhelinnumero ei ole kelvollinen.

Tämän myötä meillä on hyvä jatkaa. Nyt voit testata puhelinnumerosi ja tarkistaa, ovatko ne oikein.

Yhteenveto

Tämän artikkelin tarkoituksena oli antaa lyhyt yleiskatsaus säännöllisistä lausekkeista, niiden käytöstä ja siitä, kuinka niitä voidaan käyttää puhelinnumeroiden vahvistamiseen. Keskustelimme myös puhelinnumeron eri osista ja siitä, miten jokainen komponentti voidaan testata.

Säännöllisten lausekkeiden perusymmärryksessä voit nyt tutkia muita malleja. Voit myös käyttää työkaluja, kuten regex101 vahvistaaksesi ilmauksiasi verkossa.