Ikviens tīmekļa izstrādātājs zina sajūtu: jūs esat izveidojis veidlapu un izkliedzat, kad saprotat, ka tagad jums ir jāapstiprina katrs lauks.

Par laimi, veidlapas apstiprināšanai nav jābūt sāpīgai. Varat izmantot regulārās izteiksmes, lai apstrādātu daudzas izplatītas validācijas vajadzības.

Kas ir regulārās izteiksmes?

Regulārās izteiksmes apraksta modeļus, kas atbilst rakstzīmju kombinācijām virknēs. Varat tos izmantot, lai attēlotu tādus jēdzienus kā “tikai cipari” vai “tieši pieci lielie burti”.

Regulārās izteiksmes (sauktas arī par regulāro izteiksmi) ir spēcīgi rīki. Tiem ir daudz lietojumu, tostarp izvērstā meklēšana, atrašana un aizstāšana un virkņu validācijas darbības. Viens slavens regulāro izteiksmju lietojums ir grep komanda Linux.

Kāpēc validācijai izmantot regulārās izteiksmes?

Tur ir daudz veidi, kā apstiprināt veidlapas ievadi, bet regulārās izteiksmes ir vienkāršas, ātras un ērti lietojamas, ja saprotat, kā to izdarīt.

JavaScript ir vietējais regulāro izteiksmju atbalsts. Tas nozīmē, ka to izmantošana validācijai pretstatā ārējai bibliotēkai palīdz saglabāt pēc iespējas mazāku tīmekļa lietojumprogrammas izmēru.

Regulāras izteiksmes var arī pārbaudīt daudzu veidu veidlapas ievadi.

Regulāro izteiksmju pamati

Regulārās izteiksmes sastāv no simboliem, kas apraksta modeļus, ko veido virknes rakstzīmes. Programmā JavaScript varat izveidot regulāru izteiksmi literālu, ierakstot to starp divām slīpsvītrām. Vienkāršākā regulārās izteiksmes forma izskatās šādi:

/abc/

Iepriekš minētā regulārā izteiksme atbilst jebkurai virknei, kurā ir iekļautas rakstzīmes "a", "b" un "c" šādā secībā pēc kārtas. Virkne "abc" atbilst šai regulārajai izteiksmei, kā arī tādai virknei kā "abcdef".

Varat aprakstīt sarežģītākus modeļus, regulārajās izteiksmēs izmantojot speciālās rakstzīmes. Speciālās rakstzīmes neatspoguļo burtisku raksturu, taču tās padara jūsu regulāro izteiksmi izteiksmīgāku.

Varat tos izmantot, lai norādītu, ka kādai raksta daļai jāatkārto noteikts reižu skaits, vai lai norādītu, ka daļa no raksta nav obligāta.

Īpašās rakstzīmes piemērs ir "*". Rakstzīme “*” maina vai nu vienu rakstzīmi, vai rakstzīmju grupu, kas atrodas pirms tās. Tas paziņo, ka šīs rakstzīmes var nebūt vai tās var atkārtoties neierobežotu skaitu reižu pēc kārtas. Piemēram:

/abc*/

Atbildīs "ab", kam seko jebkāds skaits "c" rakstzīmju. Virkne "ab" ir derīgs šī modeļa piemērs, jo rakstzīme "c" nav obligāta. Virknes "abc" un "abccccc" ir vienlīdz derīgas, jo "*" nozīmē, ka "c" var atkārtot jebkuru reižu skaitu.

Pilnajā regulārās izteiksmes sintakse izmanto vēl vairākas rakstzīmes, lai aprakstītu iespējamās atbilstības. Jūs varat uzzināt vairāk no regexlearn.com Regex 101 interaktīvs kurss. MDN JavaScript ceļvedis ir arī ļoti noderīga.

Veidlapas validācija ar regulārām izteiksmēm

Varat izmantot regulāro izteiksmi, lai apstiprinātu veidlapas ievadi vairākos veidos. Pirmais veids ir izmantot JavaScript. Tas ietver dažus soļus:

  1. Iegūstiet veidlapas ievades vērtību.
  2. Pārbaudiet, vai ievades vērtība atbilst regulārajai izteiksmei.
  3. Ja tā nenotiek, parādiet vietnes lietotājam, ka ievades lauka vērtība nav derīga.

Šeit ir īss piemērs. Dots šāds ievades lauks:

<ievades vietturis="Ievades lauks">

Varat rakstīt funkciju, lai to apstiprinātu šādi:

funkcijuapstiprināt() {
ļaut vērtība = dokumentu.querySelector("ievade").vērtība;
konst regEx = /^.{3,7}$/;
atgriezties regEx.test (vērtība);
}

Vēl viens veids ir izmantot pārlūkprogrammas HTML veidlapas validācijas iespējas. Kā? Norādot regex kā HTML ievades taga modeļa atribūta vērtību.

Raksta atribūts ir derīgs tikai šādiem ievades veidiem: teksts, tel, e-pasts, url, parole un meklēšana.

Šeit ir piemērs, izmantojot atribūtu modelis:

<formā>
<ievades vietturis="Ievades lauks" nepieciešamais modelis ="/^.{3,7}$/">
<pogu>Iesniegt</button>
</form>

Ja iesniedzat veidlapu un ievades vērtība neatbilst visam regulārajam izteiksmei, veidlapā tiks parādīta noklusējuma kļūda, kas izskatās šādi:

Ja modeļa atribūtam nodrošinātā regulārā izteiksme nav derīga, pārlūkprogramma ignorēs atribūtu.

Izplatīti regex modeļi veidlapu apstiprināšanai

Regulārās izteiksmes izveide un atkļūdošana no jauna var aizņemt kādu laiku. Šeit ir daži regex priekšraksti, kurus varat izmantot, lai pārbaudītu dažus no visizplatītākajiem veidlapu datu veidiem.

Regulāra izteiksme, lai pārbaudītu virknes garumu

Viena no visizplatītākajām validācijas prasībām ir virknes garuma ierobežojums. Regulārā izteiksme, kas atbildīs septiņu rakstzīmju virknei, ir:

/^.{7}$/

"." ir vietturis, kas atbilst jebkurai rakstzīmei, un "7" iekavās norāda virknes garuma ierobežojumu. Ja virknei ir jābūt noteiktā garuma diapazonā, piemēram, no trīs līdz septiņiem, regulārā izteiksme izskatīsies šādi:

/^.{3,7}$/

Un, ja virknei ir jābūt vismaz trīs rakstzīmes garai bez augšējā ierobežojuma, tā izskatītos šādi:

/^.{3,}$/

Maz ticams, ka garums būs vienīgā validācijas prasība veidlapas ievadei. Taču jūs to bieži izmantosit kā daļu no sarežģītākas regulārās izteiksmes, ieskaitot citus nosacījumus.

Regulārā izteiksme tikai burtu lauku apstiprināšanai

Lai daži veidlapas ievadi būtu derīgi, tiem ir jāsatur tikai burti. Šī regulārā izteiksme atbilst tikai šādām virknēm:

/^[a-zA-Z]+$/

Šī regulārā izteiksme norāda rakstzīmju kopu, kas sastāv no visa alfabēta. Speciālā rakstzīme "+" nozīmē, ka iepriekšējai rakstzīmei ir jāatrodas vismaz vienu reizi, bez augšējās robežas.

Regulārā izteiksme, lai apstiprinātu tikai skaitļu laukus

Šī regulārā izteiksme atbilst tikai virknēm, kas sastāv tikai no cipariem:

/^\d+$/

Iepriekš minētā regulārā izteiksme būtībā ir tāda pati kā iepriekšējā. Vienīgā atšķirība ir tā, ka tā izmanto speciālo rakstzīmi "\d", lai attēlotu ciparu diapazonu, nevis tos izrakstītu.

Regulārā izteiksme, lai apstiprinātu burtciparu laukus

Regulāras izteiksmes atvieglo arī burtciparu lauku apstiprināšanu. Šeit ir regulārā izteiksme, kas atbilst tikai virknēm, kas sastāv no burtiem un cipariem:

/^[a-zA-Z\d]+$/

Dažos laukos ir burtciparu rakstzīmes, taču var izmantot dažas citas rakstzīmes, piemēram, defises un pasvītras. Viens šādu lauku piemērs ir lietotājvārds. Tālāk ir parādīta regulāra izteiksme, kas atbilst virknei, kas sastāv no burtiem, cipariem, pasvītrojumiem un defisēm:

/^(\w|-)+$/

Īpašā rakstzīme "\w" atbilst visai rakstzīmju klasei, tāpat kā "\d". Tas apzīmē alfabēta, ciparu un pasvītrojuma ("_") diapazonu.

Regulārā izteiksme tālruņa numuru apstiprināšanai

Tālruņa numura apstiprināšana var būt sarežģīts lauks, jo dažādās valstīs tiek izmantoti dažādi formāti. Ļoti vispārīga pieeja ir nodrošināt, lai virknē būtu tikai cipari un lai tās garums būtu noteiktā diapazonā:

/^\d{9,15}$/

Sarežģītāka pieeja varētu izskatīties šādi MDN, kas apstiprina tālruņu numurus formātā ###-###-####:

/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/

Regulāra izteiksme datumu apstiprināšanai

Tāpat kā tālruņu numuriem, arī datumiem var būt vairāki formāti. Datumu apstiprināšana parasti ir vieglāka nekā tālruņa numuru pārbaude. Kāpēc? Datumos nav citu rakstzīmju, izņemot ciparus un defises.

Šeit ir piemērs, kas apstiprinās datumus formātā "DD-MM-GGGG".

/^\d{2}-\d{2}-\d{4}$/

Validēšana ar Regex ir vienkārša

Regulārās izteiksmes apraksta modeļus, kas atbilst rakstzīmju kombinācijām virknēs. Tiem ir dažādas lietojumprogrammas, piemēram, lietotāja ievades apstiprināšana no HTML veidlapām.

Varat izmantot regulāro izteiksmi, lai apstiprinātu, izmantojot JavaScript vai HTML modeļa atribūtu. Ir viegli izveidot regulāras izteiksmes, lai pārbaudītu izplatītākos veidlapu ievades veidus, piemēram, datumus un lietotājvārdus.