Svaki web programer poznaje osjećaj: izgradili ste obrazac i zastenjali ste kad shvatite da sada morate potvrditi svako polje.
Srećom, provjera valjanosti obrasca ne mora biti bolna. Možete koristiti regularne izraze za rješavanje mnogih uobičajenih potreba provjere valjanosti.
Što su regularni izrazi?
Regularni izrazi opisuju uzorke koji odgovaraju kombinacijama znakova u nizovima. Možete ih koristiti za predstavljanje pojmova kao što su "samo brojevi" ili "točno pet velikih slova".
Regularni izrazi (koji se nazivaju i regex) moćni su alati. Imaju mnoge namjene, uključujući operacije naprednog pretraživanja, pronalaženja i zamjene i provjere valjanosti nizova. Jedna poznata primjena regularnih izraza je naredba grep u Linuxu.
Zašto koristiti regularne izraze za provjeru valjanosti?
Ima ih mnogo načini provjere valjanosti unosa obrasca, ali regularni izrazi su jednostavni, brzi i praktični za korištenje ako razumijete kako.
JavaScript ima izvornu podršku za regularne izraze. To znači da njihova upotreba za provjeru valjanosti za razliku od vanjske knjižnice pomaže da veličina vaše web aplikacije bude što je moguće manja.
Regularni izrazi također mogu potvrditi mnoge vrste unosa obrazaca.
Osnove regularnih izraza
Regularni izrazi sastoje se od simbola koji opisuju uzorke formirane od znakova u nizu. U JavaScriptu možete stvoriti literal regularnog izraza tako da ga zapišete između dvije kose crte. Najjednostavniji oblik regularnog izraza izgleda ovako:
/abc/Gornji regularni izraz odgovarat će bilo kojem nizu koji sadrži znakove "a", "b" i "c" tim redoslijedom, uzastopno. Niz "abc" odgovarat će tom regularnom izrazu, kao i niz poput "abcdef".
Naprednije uzorke možete opisati korištenjem posebnih znakova u regularnim izrazima. Posebni znakovi ne predstavljaju doslovni znak, ali čine vaš regularni izraz izražajnijim.
Možete ih upotrijebiti da navedete da se dio uzorka treba ponavljati određeni broj puta ili da naznačite da je dio uzorka neobavezan.
Primjer posebnog znaka je "*". Znak "*" mijenja ili jedan znak ili grupu znakova koji se nalaze ispred njega. Izjavljuje da ti znakovi mogu biti odsutni ili se mogu ponavljati neograničeni broj puta zaredom. Na primjer:
/abc*/
Odgovarat će "ab" iza kojeg slijedi bilo koji broj znakova "c". Niz "ab" valjan je primjer tog obrasca jer je znak "c" neobavezan. Nizovi "abc" i "abccccc" jednako su valjani, jer "*" znači da se "c" može ponoviti neograničeni broj puta.
Potpuna sintaksa regularnog izraza koristi još nekoliko znakova uzorka za opisivanje mogućih podudaranja. Možete naučiti više od regexlearn.com Regex 101 interaktivni tečaj. MDN-ov JavaScript vodič također je vrlo koristan.
Validacija obrazaca s regularnim izrazima
Regularni izraz možete koristiti za provjeru valjanosti unosa obrasca na nekoliko načina. Prvi način je korištenje JavaScripta. Uključuje nekoliko koraka:
- Dohvatite vrijednost unosa obrasca.
- Provjerite odgovara li vrijednost unosa regularnom izrazu.
- Ako se ne dogodi, pokažite korisniku web stranice da je vrijednost polja za unos nevažeća.
Evo kratkog primjera. S obzirom na polje za unos kao što je ovo:
<mjesto za unos="Polje za unos">Možete napisati funkciju za provjeru valjanosti ovako:
funkcijapotvrditi() {
neka vrijednost = dokument.querySelector("input").vrijednost;
konst regEx = /^.{3,7}$/;
povratak regEx.test (vrijednost);
}Drugi način je iskoristiti mogućnosti provjere valjanosti HTML obrazaca preglednika. Kako? Navođenjem regularnog izraza kao vrijednosti atributa uzorka HTML ulazne oznake.
Atribut uzorka valjan je samo za sljedeće vrste unosa: tekst, telefon, e-pošta, url, lozinka i pretraživanje.
Evo primjera korištenja atributa uzorka:
<oblik>
<mjesto za unos="Polje za unos" potreban uzorak="/^.{3,7}$/">
<dugme>podnijeti</button>
</form>Ako pošaljete obrazac, a vrijednost unosa ne odgovara cijelom regularnom izrazu, obrazac će prikazati zadanu pogrešku koja izgleda ovako:
Ako je regularni izraz dostavljen atributu uzorka nevažeći, preglednik će zanemariti atribut.
Uobičajeni uzorci regularnih izraza za provjeru valjanosti obrazaca
Potreba za konstruiranjem i otklanjanjem pogrešaka regularnog izraza od nule može potrajati neko vrijeme. Evo nekoliko naredbi regularnih izraza koje možete koristiti za provjeru valjanosti nekih od najčešćih vrsta podataka obrazaca.
Regularni izraz za provjeru duljine niza
Jedan od najčešćih zahtjeva za provjeru valjanosti je ograničenje duljine niza. Regularni izraz koji odgovara nizu od sedam znakova je:
/^.{7}$/"." je rezervirano mjesto koje odgovara bilo kojem znaku, a "7" u vitičastim zagradama određuje ograničenje duljine niza. Ako niz treba biti unutar određenog raspona duljine, na primjer između tri i sedam, regularni bi izraz umjesto toga izgledao ovako:
/^.{3,7}$/A kad bi niz trebao imati najmanje tri znaka bez gornjeg ograničenja, izgledao bi ovako:
/^.{3,}$/Malo je vjerojatno da će duljina biti jedini zahtjev za provjeru valjanosti za unos obrasca. Ali često ćete ga koristiti kao dio kompliciranijeg regularnog izraza uključujući druge uvjete.
Regularni izraz za provjeru valjanosti polja koja sadrže samo slova
Neki unosi u obrazac ne moraju sadržavati ništa osim slova da bi bili valjani. Sljedeći regularni izraz odgovarat će samo takvim nizovima:
/^[a-zA-Z]+$/Ovaj regularni izraz specificira skup znakova sastavljen od cijele abecede. Poseban znak "+" znači da se prethodni znak mora pojaviti barem jednom, bez gornje granice.
Regularni izraz za provjeru valjanosti polja koja sadrže samo brojeve
Sljedeći regularni izraz odgovara samo nizovima koji su u potpunosti sastavljeni od znamenki:
/^\d+$/Gore navedeni regularni izraz u biti je isti kao prethodni. Jedina razlika je u tome što koristi poseban znak "\d" za predstavljanje raspona znamenki, umjesto da ih ispisuje.
Regularni izraz za provjeru valjanosti alfanumeričkih polja
Regularni izrazi također olakšavaju provjeru valjanosti alfanumeričkih polja. Evo regularnog izraza koji će odgovarati samo nizovima koji se sastoje od slova i znamenki:
/^[a-zA-Z\d]+$/Neka su polja alfanumerička, ali dopuštaju nekoliko drugih znakova poput crtica i podvlaka. Jedan primjer takvih polja je korisničko ime. Ispod je regularni izraz koji odgovara nizu sastavljenom od slova, znamenki, podvlaka i crtica:
/^(\w|-)+$/Specijalni znak "\w" odgovara cijeloj klasi znakova, kao što to čini "\d". Predstavlja raspon abecede, znamenki i podvlake ("_").
Regularni izraz za provjeru valjanosti telefonskih brojeva
Telefonski broj može biti komplicirano polje za provjeru jer različite zemlje koriste različite formate. Vrlo opći pristup je osigurati da niz sadrži samo znamenke i da je njegova duljina unutar određenog raspona:
/^\d{9,15}$/Sofisticiraniji pristup mogao bi izgledati kao ovaj preuzet iz MDN, koji provjerava telefonske brojeve u formatu ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Regularni izraz za provjeru datuma
Poput telefonskih brojeva, datumi također mogu imati više formata. Datume je obično manje komplicirano provjeriti od telefonskih brojeva. Zašto? Datumi ne sadrže znakove osim znamenki i crtica.
Evo primjera koji će potvrditi datume u formatu "DD-MM-GGGG".
/^\d{2}-\d{2}-\d{4}$/Provjera s regularnim izrazom je jednostavna
Regularni izrazi opisuju uzorke koji odgovaraju kombinacijama znakova u nizovima. Imaju različite primjene, kao što je provjera valjanosti korisničkog unosa iz HTML obrazaca.
Možete koristiti regex za provjeru s JavaScriptom ili putem atributa HTML uzorka. Lako je konstruirati regularne izraze za provjeru uobičajenih vrsta unosa obrazaca kao što su datumi i korisnička imena.