Vsak spletni razvijalec pozna občutek: izdelali ste obrazec in zastokali, ko ugotovite, da morate zdaj potrditi vsako polje.
Na srečo ni nujno, da je preverjanje obrazca boleče. Z regularnimi izrazi lahko obravnavate številne pogoste potrebe preverjanja.
Kaj so regularni izrazi?
Regularni izrazi opisujejo vzorce, ki se ujemajo s kombinacijami znakov v nizih. Uporabite jih lahko za predstavitev pojmov, kot so »samo številke« ali »natančno pet velikih črk«.
Regularni izrazi (imenovani tudi regex) so zmogljiva orodja. Imajo veliko uporab, vključno z operacijami naprednega iskanja, iskanja in zamenjave ter preverjanja nizov. Ena znana uporaba regularnih izrazov je ukaz grep v Linuxu.
Zakaj uporabljati regularne izraze za preverjanje?
Veliko jih je načine za preverjanje vnosa obrazca, vendar so regularni izrazi preprosti, hitri in priročni za uporabo, če razumete, kako.
JavaScript ima domačo podporo za regularne izraze. To pomeni, da njihova uporaba za preverjanje v nasprotju z zunanjo knjižnico pomaga ohraniti velikost vaše spletne aplikacije čim manjšo.
Regularni izrazi lahko tudi potrdijo številne vrste vnosa obrazca.
Osnove regularnih izrazov
Regularni izrazi so sestavljeni iz simbolov, ki opisujejo vzorce, ki jih tvorijo znaki v nizu. V JavaScriptu lahko ustvarite literal regularnega izraza tako, da ga zapišete med dve poševnici. Najenostavnejša oblika regularnega izraza izgleda takole:
/abc/Zgornji regularni izraz se bo ujemal s katerim koli nizom, ki zaporedno vključuje znake "a", "b" in "c" v tem vrstnem redu. Niz "abc" se bo ujemal s tem regularnim izrazom, kot tudi niz, kot je "abcdef".
Naprednejše vzorce lahko opišete z uporabo posebnih znakov v regularnih izrazih. Posebni znaki ne predstavljajo dobesednega znaka, vendar naredijo vaš regularni izraz bolj izrazit.
Z njimi lahko določite, da naj se del vzorca ponovi določeno število krat, ali da označite, da je del vzorca neobvezen.
Primer posebnega znaka je "*". Znak "*" spreminja bodisi en sam znak ali skupino znakov, ki so pred njim. Izjavlja, da so ti znaki morda odsotni ali pa se lahko ponavljajo poljubno število krat zapored. Na primer:
/abc*/
Ujema se z "ab", ki mu sledi poljubno število znakov "c". Niz "ab" je veljaven primer tega vzorca, ker znak "c" ni obvezen. Niza "abc" in "abccccc" sta enako veljavna, ker "*" pomeni, da se "c" lahko ponovi poljubno število krat.
Celotna sintaksa regularnega izraza uporablja več znakov vzorca za opis možnih ujemanj. Več se lahko naučite iz regexlearn.com's Regex 101 interaktivni tečaj. Vodnik po JavaScriptu MDN je tudi zelo uporaben.
Preverjanje obrazca z regularnimi izrazi
Z regularnimi izrazi lahko preverite vnos obrazca na več načinov. Prvi način je uporaba JavaScripta. Vključuje nekaj korakov:
- Pridobite vrednost vnosa obrazca.
- Preverite, ali se vrednost vnosa ujema z regularnim izrazom.
- Če se ne, se uporabniku spletnega mesta prikaže, da je vrednost vnosnega polja neveljavna.
Tukaj je kratek primer. Glede na vnosno polje, kot je to:
<vnos placeholder="Vnosno polje">Napišete lahko funkcijo za preverjanje tako:
funkcijopotrditi() {
pustiti vrednost = dokument.querySelector("input").vrednost;
konst regEx = /^.{3,7}$/;
vrnitev regEx.test (vrednost);
}Drug način je, da izkoristite zmožnosti brskalnika za preverjanje obrazcev HTML. kako Z določitvijo regularnega izraza kot vrednosti atributa vzorca vhodne oznake HTML.
Atribut vzorca je veljaven samo za naslednje vrste vnosa: besedilo, tel, e-pošta, url, geslo in iskanje.
Tukaj je primer uporabe atributa vzorec:
<oblika>
<vnos placeholder="Vnosno polje" zahtevan vzorec="/^.{3,7}$/">
<gumb>Predloži</button>
</form>Če oddate obrazec in se vrednost vnosa ne ujema s celotnim regularnim izrazom, bo obrazec prikazal privzeto napako, ki je videti takole:
Če je regularni izraz, dodan atributu vzorca, neveljaven, bo brskalnik atribut prezrl.
Pogosti vzorci regularnih izrazov za preverjanje obrazcev
Konstruiranje in odpravljanje napak v regularnem izrazu lahko traja nekaj časa. Tukaj je nekaj stavkov regularnih izrazov, ki jih lahko uporabite za preverjanje nekaterih najpogostejših vrst podatkov obrazcev.
Regularni izraz za preverjanje dolžine niza
Ena najpogostejših zahtev za preverjanje veljavnosti je omejitev dolžine niza. Regularni izraz, ki se bo ujemal s sedmimi znaki, je:
/^.{7}$/"." je ograda, ki se ujema s katerim koli znakom, "7" v zavitih oklepajih pa določa omejitev dolžine niza. Če bi moral biti niz znotraj določenega obsega dolžine, na primer med tri in sedem, bi bil regularni izraz videti takole:
/^.{3,7}$/In če bi moral biti niz dolg vsaj tri znake brez zgornje omejitve, bi bil videti takole:
/^.{3,}$/Malo verjetno je, da bo dolžina edina zahteva za preverjanje veljavnosti vnosa obrazca. Vendar ga boste pogosto uporabljali kot del bolj zapletenega regularnega izraza, vključno z drugimi pogoji.
Regularni izraz za preverjanje polj, ki vsebujejo samo črke
Nekateri vnosi v obrazec morajo vsebovati samo črke, da so veljavni. Naslednji regularni izraz se bo ujemal samo s takimi nizi:
/^[a-zA-Z]+$/Ta regularni izraz podaja nabor znakov, sestavljen iz celotne abecede. Posebni znak "+" pomeni, da se mora predhodni znak pojaviti vsaj enkrat, brez zgornje omejitve.
Regularni izraz za preverjanje polj, ki vsebujejo samo številke
Naslednji regularni izraz se bo ujemal samo z nizi, ki so v celoti sestavljeni iz števk:
/^\d+$/Zgornji regularni izraz je v bistvu enak prejšnjemu. Edina razlika je v tem, da uporablja poseben znak "\d" za predstavitev obsega števk, namesto da bi jih izpisal.
Regularni izraz za preverjanje alfanumeričnih polj
Regularni izrazi olajšajo tudi preverjanje alfanumeričnih polj. Tukaj je regularni izraz, ki se bo ujemal samo z nizi, sestavljenimi iz črk in števk:
/^[a-zA-Z\d]+$/Nekatera polja so alfanumerična, vendar dovoljujejo nekaj drugih znakov, kot so vezaji in podčrtaji. Primer takih polj je uporabniško ime. Spodaj je regularni izraz, ki se ujema z nizom, sestavljenim iz črk, števk, podčrtajev in vezajev:
/^(\w|-)+$/Posebni znak "\w" se ujema s celotnim razredom znakov, tako kot "\d". Predstavlja obseg abecede, števk in podčrtaja (»_«).
Regularni izraz za preverjanje telefonskih številk
Telefonska številka je lahko zapleteno polje za preverjanje, ker različne države uporabljajo različne oblike. Zelo splošen pristop je zagotoviti, da niz vsebuje samo števke in da je njegova dolžina znotraj določenega obsega:
/^\d{9,15}$/Bolj prefinjen pristop bi lahko izgledal kot ta, vzet iz MDN, ki preverja telefonske številke v obliki ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Regularni izraz za preverjanje datumov
Tako kot telefonske številke imajo lahko tudi datumi več oblik. Datume je običajno manj zapleteno preveriti kot telefonske številke. Zakaj? Datumi ne vsebujejo nobenih znakov razen števk in vezajev.
Tukaj je primer, ki bo preveril datume v obliki zapisa »DD-MM-LLLL«.
/^\d{2}-\d{2}-\d{4}$/Preverjanje z regularnim izrazom je preprosto
Regularni izrazi opisujejo vzorce, ki se ujemajo s kombinacijami znakov v nizih. Imajo različne aplikacije, kot je preverjanje uporabniškega vnosa iz obrazcev HTML.
Za preverjanje z JavaScriptom ali prek atributa vzorca HTML lahko uporabite regularni izraz. Enostavno je sestaviti regularne izraze za preverjanje običajnih vrst vnosov obrazcev, kot so datumi in uporabniška imena.