Iga veebiarendaja teab seda tunnet: olete koostanud vormi ja oigate, kui mõistate, et nüüd peate iga välja valideerima.
Õnneks ei pea vormi kinnitamine valus olema. Regulaaravaldisi saate kasutada paljude levinud valideerimisvajaduste lahendamiseks.
Mis on regulaaravaldised?
Regulaaravaldised kirjeldavad mustreid, mis vastavad stringides olevate tähemärkide kombinatsioonidele. Saate neid kasutada selliste mõistete tähistamiseks nagu "ainult numbrid" või "täpselt viis suurtähte".
Regulaaravaldised (nimetatakse ka regexiks) on võimsad tööriistad. Neil on palju kasutusvõimalusi, sealhulgas täpsem otsing, otsimine ja asendamine ning stringide valideerimistoimingud. Üks kuulus regulaaravaldiste rakendus on grep käsk Linuxis.
Miks kasutada valideerimiseks regulaaravaldisi?
Seal on palju vormisisestuse kinnitamise viisid, kuid regulaaravaldised on lihtsad, kiired ja mugavad kasutada, kui mõistate, kuidas.
JavaScriptil on tavaavaldiste loomulik tugi. See tähendab, et nende kasutamine valideerimiseks välise teegi asemel aitab hoida teie veebirakenduse suurust võimalikult väikesena.
Regulaaravaldised on samuti võimelised kinnitama mitut tüüpi vormisisestusi.
Regulaaravaldiste alused
Regulaaravaldised koosnevad sümbolitest, mis kirjeldavad stringi märkide poolt moodustatud mustreid. JavaScriptis saate luua regulaaravaldise literaali, kirjutades selle kahe kaldkriipsu vahele. Regulaaravaldise lihtsaim vorm näeb välja selline:
/abc/Ülaltoodud regulaaravaldis vastab igale stringile, mis sisaldab järjestikku selles järjekorras märke "a", "b" ja "c". String "abc" sobib nii selle regulaaravaldisega kui ka stringiga nagu "abcdef".
Täpsemaid mustreid saate kirjeldada, kasutades regulaaravaldistes erimärke. Erimärgid ei esinda sõnasõnalist tähemärki, kuid muudavad teie regexi ilmekamaks.
Nende abil saate määrata, et osa mustrist peaks korduma teatud arv kordi, või näidata, et osa mustrist on valikuline.
Erimärgi näide on "*". Märk "*" muudab kas üksikut märki või märkide rühma, mis on enne seda. See deklareerib, et need märgid võivad puududa või korduda mitu korda järjest. Näiteks:
/abc*/
Vastab "ab", millele järgneb suvaline arv "c" märke. String "ab" on selle mustri sobiv näide, kuna märk "c" on valikuline. Stringid "abc" ja "abccccc" kehtivad võrdselt, sest "*" tähendab, et "c" võib korduda suvalise arvu kordi.
Täielik regexi süntaks kasutab võimalike vastete kirjeldamiseks veel mitut mustrimärki. Lisateavet saate aadressilt regexlearn.com Regex 101 interaktiivne kursus. MDN-i JavaScripti juhend on ka väga kasulik.
Vormi kinnitamine regulaaravaldistega
Vormi sisendi kinnitamiseks saate kasutada regexit mitmel viisil. Esimene võimalus on kasutada JavaScripti. See hõlmab mõnda sammu:
- Hankige vormi sisendi väärtus.
- Kontrollige, kas sisendi väärtus ühtib regulaaravaldisega.
- Kui seda ei juhtu, kuvage veebisaidi kasutajale, et sisestusvälja väärtus on kehtetu.
Siin on lühike näide. Antakse selline sisestusväli:
<sisendi kohahoidja="Sisestusväli">Selle kinnitamiseks saate kirjutada funktsiooni järgmiselt:
funktsioonikinnitada() {
lase väärtus = dokument.querySelector("sisend").väärtus;
konst regEx = /^.{3,7}$/;
tagasi regEx.test (väärtus);
}Teine võimalus on kasutada ära brauseri HTML-vormingu kontrollimise võimalusi. Kuidas? Määrates regexi HTML-i sisendmärgendi mustri atribuudi väärtuseks.
Mustri atribuut kehtib ainult järgmiste sisestustüüpide puhul: tekst, tel, email, url, parool ja otsing.
Siin on näide mustri atribuudi kasutamisest:
<vormi>
<sisendi kohahoidja="Sisestusväli" nõutav muster="/^.{3,7}$/">
<nuppu>Esita</button>
</form>Kui saadate vormi ja sisendi väärtus ei ühti kogu regexiga, kuvab vorm vaikevea, mis näeb välja järgmine:
Kui atribuudile muster antud regulaaravaldis on kehtetu, ignoreerib brauser seda atribuuti.
Levinud regexi mustrid vormide kinnitamiseks
Regexi nullist konstrueerimine ja silumine võib võtta aega. Siin on mõned regex-laused, mida saate kasutada kõige levinumate vormiandmete tüüpide kinnitamiseks.
Regulaaravaldis stringi pikkuse kinnitamiseks
Üks levinumaid valideerimisnõudeid on stringi pikkuse piiramine. Seitsmekohalisele stringile sobiv regulaaravaldis on:
/^.{7}$/"." on kohatäide, mis sobib mis tahes märgiga, ja sulgudes olev "7" määrab stringi pikkusepiirangu. Kui string peab jääma teatud pikkusevahemikku, näiteks kolm kuni seitse, näeks regulaaravaldis välja järgmine:
/^.{3,7}$/Ja kui string peab olema vähemalt kolme tähemärgi pikkune ilma ülempiirita, näeks see välja järgmine:
/^.{3,}$/On ebatõenäoline, et pikkus on vormisisendi ainus valideerimisnõue. Kuid sageli kasutate seda keerukama regulaaravaldise, sealhulgas muude tingimuste osana.
Regulaaravaldis ainult tähte sisaldavate väljade kinnitamiseks
Mõned vormisisendid peavad kehtimiseks sisaldama ainult tähti. Järgmine regulaaravaldis sobib ainult selliste stringidega:
/^[a-zA-Z]+$/See regulaaravaldis määrab tähestiku, mis koosneb kogu tähestikust. Erimärk "+" tähendab, et eelnev märk peab esinema vähemalt korra, ilma ülempiirita.
Regulaaravaldis ainult numbriväljade kinnitamiseks
Järgmine regulaaravaldis sobib ainult täielikult numbritest koosnevatele stringidele:
/^\d+$/Ülaltoodud regulaaravaldis on sisuliselt sama, mis eelmine. Ainus erinevus seisneb selles, et see kasutab numbrivahemiku tähistamiseks erimärki "\d", selle asemel, et neid välja kirjutada.
Regulaaravaldis tähtnumbriliste väljade kinnitamiseks
Regulaaravaldised muudavad ka tähtnumbriliste väljade kinnitamise lihtsaks. Siin on regulaaravaldis, mis sobib ainult tähtedest ja numbritest koosnevate stringidega:
/^[a-zA-Z\d]+$/Mõned väljad on tähtnumbrilised, kuid lubavad kasutada mõnda muud märki, nagu sidekriipsud ja allkriipsud. Üks näide sellistest väljadest on kasutajanimi. Allpool on regulaaravaldis, mis sobib tähtedest, numbritest, alakriipsudest ja sidekriipsudest koosnevale stringile:
/^(\w|-)+$/Erimärk "\w" vastab tervele märkide klassile, nagu ka "\d". See tähistab tähestiku, numbrite ja allkriipsu ("_") vahemikku.
Regulaaravaldis telefoninumbrite kinnitamiseks
Telefoninumbri kinnitamine võib olla keeruline väli, kuna erinevad riigid kasutavad erinevaid vorminguid. Väga üldine lähenemisviis on tagada, et string sisaldab ainult numbreid ja selle pikkus jääb teatud vahemikku:
/^\d{9,15}$/Keerulisem lähenemine võib välja näha selline, nagu see on võetud MDN, mis kinnitab telefoninumbrid vormingus ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Regulaaravaldis kuupäevade kinnitamiseks
Nagu telefoninumbritel, võib ka kuupäevadel olla mitu vormingut. Kuupäevade kinnitamine on tavaliselt lihtsam kui telefoninumbrite kinnitamine. Miks? Kuupäevad ei sisalda muid märke peale numbrite ja sidekriipsude.
Siin on näide, mis kinnitab vormingus "PP-KK-AAAA" kuupäevi.
/^\d{2}-\d{2}-\d{4}$/Regexiga kinnitamine on lihtne
Regulaaravaldised kirjeldavad mustreid, mis vastavad stringides olevate tähemärkide kombinatsioonidele. Neil on mitmesuguseid rakendusi, näiteks kasutaja sisendi valideerimine HTML-vormidest.
Regexi abil saate kinnitada JavaScripti või HTML-mustri atribuudi kaudu. Tavaliste vormisisendite (nt kuupäevad ja kasutajanimed) valideerimiseks on lihtne koostada regulaaravaldisi.
