Fiecare dezvoltator web cunoaște sentimentul: ai construit un formular și ai scos un geamăt când realizezi că acum trebuie să validezi fiecare câmp.
Din fericire, validarea formularelor nu trebuie să fie dureroasă. Puteți folosi expresii regulate pentru a gestiona multe nevoi comune de validare.
Ce sunt expresiile regulate?
Expresiile regulate descriu modele care se potrivesc cu combinații de caractere din șiruri. Le puteți folosi pentru a reprezenta concepte precum „numai numere” sau „exact cinci litere mari”.
Expresiile regulate (numite și regex) sunt instrumente puternice. Au multe utilizări, inclusiv căutare avansată, căutare și înlocuire și operații de validare pe șiruri. O aplicație faimoasă a expresiilor regulate este comanda grep în Linux.
De ce să folosiți expresii regulate pentru validare?
Există multe modalități de a valida introducerea formularului, dar expresiile regulate sunt simple, rapide și convenabile de utilizat dacă înțelegeți cum.
JavaScript are suport nativ pentru expresiile regulate. Aceasta înseamnă că utilizarea lor pentru validare, spre deosebire de o bibliotecă externă, ajută la menținerea dimensiunii aplicației dvs. web cât mai mică posibil.
Expresiile regulate sunt, de asemenea, capabile să valideze multe tipuri de introducere a formularelor.
Bazele expresiilor regulate
Expresiile regulate constau din simboluri care descriu modele formate din caractere dintr-un șir. În JavaScript, puteți crea o expresie regulată literal scriind-o între două bare oblice. Cea mai simplă formă a unei expresii regulate arată astfel:
/abc/Expresia regulată de mai sus se va potrivi cu orice șir care include caracterele „a”, „b” și „c” în acea ordine, consecutiv. Șirul „abc” se va potrivi cu expresia regulată, precum și cu un șir precum „abcdef”.
Puteți descrie modele mai avansate folosind caractere speciale în expresiile regulate. Caracterele speciale nu reprezintă un caracter literal, dar vă fac expresia regex mai expresivă.
Le puteți folosi pentru a specifica că o parte a modelului trebuie să se repete de un anumit număr de ori sau pentru a indica faptul că o parte din model este opțională.
Un exemplu de caracter special este „*”. Caracterul „*” modifică fie un singur caracter, fie un grup de caractere, care vin înaintea lui. Acesta declară că acele personaje pot lipsi sau se pot repeta de orice număr de ori la rând. De exemplu:
/abc*/
Se va potrivi cu „ab” urmat de orice număr de caractere „c”. Șirul „ab” este un exemplu valid al acelui model, deoarece caracterul „c” este opțional. Șirurile „abc” și „abccccc” sunt la fel de valide, deoarece „*” înseamnă că „c” se poate repeta de orice număr de ori.
Sintaxa regex completă folosește mai multe caractere tip model pentru a descrie potrivirile posibile. Puteți învăța mai multe de la Regex 101 de la regexlearn.com curs interactiv. Ghidul JavaScript MDN este, de asemenea, foarte util.
Validarea formularului cu expresii regulate
Puteți utiliza regex pentru a valida introducerea formularului în câteva moduri. Prima modalitate este să utilizați JavaScript. Aceasta presupune câțiva pași:
- Obțineți valoarea introducerii formularului.
- Verificați dacă valoarea intrării se potrivește cu expresia regulată.
- Dacă nu, afișați utilizatorului site-ului web că valoarea câmpului de introducere este nevalidă.
Iată un exemplu scurt. Având în vedere un câmp de intrare ca acesta:
<substituent de intrare="Câmp de intrare">Puteți scrie o funcție pentru a o valida astfel:
funcţievalida() {
lăsa valoare = document.querySelector("input").value;
const regEx = /^.{3,7}$/;
întoarcere regEx.test (valoare);
}O altă modalitate este să profitați de capacitățile de validare a formularelor HTML ale browserului. Cum? Specificând regex ca valoare a atributului model al etichetei de intrare HTML.
Atributul model este valabil numai pentru următoarele tipuri de introducere: text, tel, e-mail, url, parolă și căutare.
Iată un exemplu folosind atributul model:
<formă>
<substituent de intrare="Câmp de intrare" model necesar="/^.{3,7}$/">
<buton>Trimite</button>
</form>Dacă trimiteți formularul și valoarea intrării nu se potrivește cu întreaga expresie regex, formularul va afișa o eroare implicită care arată astfel:
Dacă expresia regulată furnizată atributului model este invalidă, browserul va ignora atributul.
Modele regex comune pentru validarea formularelor
Construirea și depanarea regex de la zero poate dura ceva timp. Iată câteva instrucțiuni regex pe care le puteți utiliza pentru a valida unele dintre cele mai comune tipuri de date de formular.
Expresie regulată pentru a valida lungimea șirului
Una dintre cele mai comune cerințe de validare este o restricție privind lungimea unui șir. Expresia regulată care se va potrivi cu un șir de șapte caractere este:
/^.{7}$/"." este un substituent care se potrivește cu orice caracter, iar „7” dintre paranteze specifică limita de lungime a șirului. Dacă șirul trebuie să fie într-un anumit interval de lungime, cum ar fi între trei și șapte, expresia regulată ar arăta astfel:
/^.{3,7}$/Și dacă șirul ar trebui să aibă cel puțin trei caractere fără limită superioară, ar arăta astfel:
/^.{3,}$/Este puțin probabil ca lungimea să fie singura cerință de validare pentru introducerea unui formular. Dar îl veți folosi adesea ca parte a unei expresii regulate mai complicate, inclusiv alte condiții.
Expresie regulată pentru a valida câmpurile numai cu litere
Unele intrări de formular nu trebuie să conțină decât litere pentru a fi valide. Următoarea expresie regulată se va potrivi numai cu astfel de șiruri:
/^[a-zA-Z]+$/Această expresie regulată specifică un set de caractere format din întregul alfabet. Caracterul special „+” înseamnă că caracterul precedent trebuie să apară cel puțin o dată, fără limită superioară.
Expresie regulată pentru a valida câmpurile numai pentru numere
Următoarea expresie regulată se va potrivi numai cu șiruri formate în întregime din cifre:
/^\d+$/Expresia regulată de mai sus este în esență aceeași cu cea anterioară. Singura diferență este că folosește un caracter special „\d” pentru a reprezenta intervalul de cifre, în loc să le scrie.
Expresie regulată pentru validarea câmpurilor alfanumerice
Expresiile regulate facilitează validarea câmpurilor alfanumerice. Iată o expresie regulată care se va potrivi numai cu șiruri formate din litere și cifre:
/^[a-zA-Z\d]+$/Unele câmpuri sunt alfanumerice, dar permit alte câteva caractere, cum ar fi cratime și liniuțe de subliniere. Un exemplu de astfel de câmpuri este numele de utilizator. Mai jos este o expresie regulată care se potrivește cu un șir format din litere, cifre, litere de subliniere și cratime:
/^(\w|-)+$/Caracterul special „\w” se potrivește cu o întreagă clasă de caractere, așa cum face „\d”. Reprezintă intervalul de alfabet, cifre și caracterul de subliniere ("_").
Expresie regulată pentru a valida numerele de telefon
Un număr de telefon poate fi un câmp complicat de validat, deoarece diferite țări folosesc formate diferite. O abordare foarte generală este să vă asigurați că șirul conține doar cifre și că lungimea sa este într-un anumit interval:
/^\d{9,15}$/O abordare mai sofisticată ar putea arăta ca aceasta din care este luată MDN, care validează numerele de telefon în formatul ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Expresie regulată pentru a valida datele
La fel ca numerele de telefon, datele pot avea, de asemenea, mai multe formate. Datele sunt de obicei mai puțin complicat de validat decât numerele de telefon. De ce? Datele nu conțin alte caractere decât cifre și cratime.
Iată un exemplu care va valida datele în formatul „ZZ-LL-AAAA”.
/^\d{2}-\d{2}-\d{4}$/Validarea cu Regex este ușoară
Expresiile regulate descriu modele care se potrivesc cu combinații de caractere din șiruri. Au o varietate de aplicații, cum ar fi validarea intrărilor utilizatorului din formularele HTML.
Puteți utiliza regex pentru a valida cu JavaScript sau prin atributul model HTML. Este ușor să construiți expresii regulate pentru a valida tipuri obișnuite de intrări de formulare, cum ar fi datele și numele de utilizator.