Jokainen verkkokehittäjä tietää tunteen: olet rakentanut lomakkeen ja voit huokaista, kun huomaat, että nyt sinun on vahvistettava jokainen kenttä.
Onneksi lomakkeen vahvistamisen ei tarvitse olla tuskallista. Säännöllisten lausekkeiden avulla voit käsitellä monia yleisiä vahvistustarpeita.
Mitä ovat säännölliset lausekkeet?
Säännölliset lausekkeet kuvaavat kuvioita, jotka vastaavat merkkijonojen merkkiyhdistelmiä. Voit käyttää niitä edustamaan käsitteitä, kuten "vain numerot" tai "täsmälleen viisi isoa kirjainta".
Säännölliset lausekkeet (kutsutaan myös regexiksi) ovat tehokkaita työkaluja. Niillä on monia käyttötarkoituksia, mukaan lukien tarkennettu haku, etsi ja korvaa sekä merkkijonojen vahvistustoiminnot. Yksi kuuluisa säännöllisten lausekkeiden sovellus on grep-komento Linuxissa.
Miksi käyttää säännöllisiä lausekkeita validointiin?
On olemassa monia tapoja vahvistaa lomakkeen syöttö, mutta säännölliset lausekkeet ovat yksinkertaisia, nopeita ja käteviä käyttää, jos ymmärrät miten.
JavaScript tukee säännöllisiä lausekkeita. Tämä tarkoittaa, että niiden käyttäminen validointiin ulkoisen kirjaston sijaan auttaa pitämään verkkosovelluksesi koon mahdollisimman pienenä.
Säännölliset lausekkeet pystyvät myös vahvistamaan monenlaisia lomakesyöttöjä.
Säännöllisten lausekkeiden perusteet
Säännölliset lausekkeet koostuvat symboleista, jotka kuvaavat merkkijonon merkkien muodostamia kuvioita. JavaScriptissä voit luoda säännöllisen lausekkeen literaalin kirjoittamalla sen kahden vinoviivan väliin. Säännöllisen lausekkeen yksinkertaisin muoto näyttää tältä:
/abc/Yllä oleva säännöllinen lauseke vastaa mitä tahansa merkkijonoa, joka sisältää merkit "a", "b" ja "c" tässä järjestyksessä, peräkkäin. Merkkijono "abc" vastaa tätä säännöllistä lauseketta sekä merkkijonoa, kuten "abcdef".
Voit kuvata kehittyneempiä malleja käyttämällä erikoismerkkejä säännöllisissä lausekkeissasi. Erikoismerkit eivät edusta kirjaimellista merkkiä, mutta ne tekevät säännöllisestä lausekkeesta ilmeisemmän.
Voit käyttää niitä määrittämään, että kuvion osan tulee toistua tietty määrä kertoja, tai osoittaa, että osa kuviosta on valinnainen.
Esimerkki erikoismerkistä on "*". "*"-merkki muokkaa joko yhtä merkkiä tai merkkiryhmää, joka tulee ennen sitä. Se ilmoittaa, että nämä merkit voivat puuttua tai toistaa itseään kuinka monta kertaa peräkkäin. Esimerkiksi:
/abc*/
Vastaa sanaa "ab", jota seuraa mikä tahansa määrä "c"-merkkejä. Merkkijono "ab" on kelvollinen esimerkki tästä mallista, koska merkki "c" on valinnainen. Merkkijonot "abc" ja "abccccc" ovat yhtä päteviä, koska "*" tarkoittaa, että "c" voi toistua kuinka monta kertaa tahansa.
Täysi regex-syntaksi käyttää useita muita kuviomerkkejä kuvaamaan mahdollisia osumia. Voit oppia lisää osoitteesta regexlearn.comin Regex 101 interaktiivinen kurssi. MDN: n JavaScript-opas on myös erittäin hyödyllinen.
Lomakkeen vahvistus säännöllisillä lausekkeilla
Voit käyttää säännöllistä lauseketta lomakkeen syöttämisen vahvistamiseen kahdella tavalla. Ensimmäinen tapa on käyttää JavaScriptiä. Se sisältää muutaman vaiheen:
- Hanki lomakkeen syötteen arvo.
- Tarkista, vastaako syötteen arvo säännöllistä lauseketta.
- Jos näin ei ole, näytä verkkosivuston käyttäjälle, että syöttökentän arvo on virheellinen.
Tässä lyhyt esimerkki. Annettu syöttökenttä näin:
<syötä paikkamerkki="Syöttökenttä">Voit kirjoittaa funktion vahvistamaan sen seuraavasti:
toimintovahvistaa() {
päästää arvo = asiakirja.querySelector("syöttö").arvo;
konst regEx = /^.{3,7}$/;
palata regEx.test (arvo);
}Toinen tapa on hyödyntää selaimen HTML-lomakkeen tarkistusominaisuuksia. Miten? Määrittämällä regex HTML-syöttötunnisteen malliattribuutin arvoksi.
Malliattribuutti on voimassa vain seuraaville syöttötyypeille: teksti, puhelin, sähköposti, url, salasana ja haku.
Tässä on esimerkki malli-attribuutin käyttämisestä:
<muodossa>
<syötä paikkamerkki="Syöttökenttä" vaadittu malli ="/^.{3,7}$/">
<-painiketta>Lähetä</button>
</form>Jos lähetät lomakkeen ja syötteen arvo ei vastaa koko säännöllistä lauseketta, lomake näyttää oletusvirheen, joka näyttää tältä:
Jos pattern-attribuutille annettu säännöllinen lauseke on virheellinen, selain jättää määritteen huomioimatta.
Yleiset säännölliset mallit lomakkeiden vahvistamiseen
Regexin rakentaminen ja virheenkorjaus tyhjästä voi viedä jonkin aikaa. Tässä on joitain regex-lauseita, joita voit käyttää joidenkin yleisimpien lomaketietojen tarkistamiseen.
Säännöllinen lauseke merkkijonon pituuden vahvistamiseksi
Yksi yleisimmistä validointivaatimuksista on merkkijonon pituuden rajoitus. Säännöllinen lauseke, joka vastaa seitsenmerkkistä merkkijonoa, on:
/^.{7}$/"." on paikkamerkki, joka vastaa mitä tahansa merkkiä, ja "7" suluissa määrittää merkkijonon pituusrajoituksen. Jos merkkijonon piti olla tietyllä pituusalueella, esimerkiksi kolmen ja seitsemän välillä, säännöllinen lauseke näyttää sen sijaan tältä:
/^.{3,7}$/Ja jos merkkijonon piti olla vähintään kolme merkkiä pitkä ilman ylärajaa, se näyttäisi tältä:
/^.{3,}$/On epätodennäköistä, että pituus on lomakesyötteen ainoa vahvistusvaatimus. Mutta käytät sitä usein osana monimutkaisempaa säännöllistä lauseketta, mukaan lukien muut ehdot.
Säännöllinen lauseke vain kirjaimia sisältävien kenttien vahvistamiseksi
Joidenkin lomakesyötteiden tulee sisältää vain kirjaimia, jotta ne ovat kelvollisia. Seuraava säännöllinen lauseke vastaa vain tällaisia merkkijonoja:
/^[a-zA-Z]+$/Tämä säännöllinen lauseke määrittää koko aakkosesta koostuvan merkistön. Erikoismerkki "+" tarkoittaa, että edellisen merkin tulee esiintyä vähintään kerran ilman ylärajaa.
Säännöllinen lauseke vain numerokenttien vahvistamiseksi
Seuraava säännöllinen lauseke vastaa vain merkkijonoja, jotka koostuvat kokonaan numeroista:
/^\d+$/Yllä oleva säännöllinen lauseke on olennaisesti sama kuin edellinen. Ainoa ero on, että se käyttää erikoismerkkiä "\d" edustamaan numeroaluetta sen sijaan, että ne kirjoittaisi.
Säännöllinen lauseke aakkosnumeeristen kenttien vahvistamiseksi
Säännölliset lausekkeet helpottavat myös aakkosnumeeristen kenttien vahvistamista. Tässä on säännöllinen lauseke, joka vastaa vain kirjaimista ja numeroista koostuvia merkkijonoja:
/^[a-zA-Z\d]+$/Jotkut kentät ovat aakkosnumeerisia, mutta sallivat muutamia muita merkkejä, kuten yhdysviivoja ja alaviivoja. Yksi esimerkki tällaisista kentistä on käyttäjänimi. Alla on säännöllinen lauseke, joka vastaa merkkijonoa, joka koostuu kirjaimista, numeroista, alaviivoja ja yhdysviivoja:
/^(\w|-)+$/Erikoismerkki "\w" vastaa kokonaista merkkiluokkaa, kuten "\d" tekee. Se edustaa aakkosten, numeroiden ja alaviivamerkin ("_") aluetta.
Säännöllinen lauseke puhelinnumeroiden vahvistamiseen
Puhelinnumeron vahvistaminen voi olla monimutkainen kenttä, koska eri maat käyttävät erilaisia muotoja. Hyvin yleinen lähestymistapa on varmistaa, että merkkijono sisältää vain numeroita ja että sen pituus on tietyllä alueella:
/^\d{9,15}$/Kehittyneempi lähestymistapa saattaa näyttää tältä MDN, joka vahvistaa puhelinnumerot muodossa ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Säännöllinen lauseke päivämäärien vahvistamiseksi
Kuten puhelinnumerot, päivämäärillä voi olla useita muotoja. Päivämäärät on yleensä helpompi vahvistaa kuin puhelinnumerot. Miksi? Päivämäärät eivät sisällä muita merkkejä kuin numeroita ja yhdysmerkkejä.
Tässä on esimerkki, joka vahvistaa päivämäärät muodossa "PP-KK-VVVV".
/^\d{2}-\d{2}-\d{4}$/Vahvistaminen Regexillä on helppoa
Säännölliset lausekkeet kuvaavat kuvioita, jotka vastaavat merkkijonojen merkkiyhdistelmiä. Niillä on useita sovelluksia, kuten käyttäjän syötteiden validointi HTML-lomakkeista.
Voit käyttää regexiä vahvistaaksesi JavaScriptin tai HTML-mallimääritteen avulla. On helppo rakentaa säännöllisiä lausekkeita yleisten lomakkeen syötteiden, kuten päivämäärien ja käyttäjänimien, vahvistamiseksi.
