Každý webový vývojár pozná ten pocit: vytvorili ste formulár a vzdychnete, keď si uvedomíte, že teraz musíte overiť každé pole.
Našťastie, overenie formulára nemusí byť bolestivé. Regulárne výrazy môžete použiť na zvládnutie mnohých bežných potrieb overovania.
Čo sú regulárne výrazy?
Regulárne výrazy popisujú vzory, ktoré zodpovedajú kombináciám znakov v reťazcoch. Môžete ich použiť na znázornenie pojmov ako „iba čísla“ alebo „presne päť veľkých písmen“.
Regulárne výrazy (nazývané aj regulárny výraz) sú mocné nástroje. Majú mnoho použití, vrátane rozšíreného vyhľadávania, operácií hľadania a nahradenia a overovania reťazcov. Jednou zo známych aplikácií regulárnych výrazov je príkaz grep v systéme Linux.
Prečo používať regulárne výrazy na overenie?
Je ich veľa spôsoby overenia zadania formulára, ale regulárne výrazy sú jednoduché, rýchle a pohodlné na používanie, ak viete ako.
JavaScript má natívnu podporu pre regulárne výrazy. To znamená, že ich použitie na overenie na rozdiel od externej knižnice pomáha udržiavať veľkosť vašej webovej aplikácie čo najmenšiu.
Regulárne výrazy sú tiež schopné overiť mnoho typov zadávania formulárov.
Základy regulárnych výrazov
Regulárne výrazy pozostávajú zo symbolov, ktoré opisujú vzory tvorené znakmi v reťazci. V JavaScripte môžete vytvoriť literál regulárneho výrazu jeho napísaním medzi dve lomky. Najjednoduchšia forma regulárneho výrazu vyzerá takto:
/abc/Vyššie uvedený regulárny výraz sa bude zhodovať s ľubovoľným reťazcom, ktorý obsahuje znaky „a“, „b“ a „c“ v tomto poradí, za sebou. Reťazec "abc" sa bude zhodovať s týmto regulárnym výrazom, ako aj s reťazcom ako "abcdef".
Pokročilejšie vzory môžete opísať pomocou špeciálnych znakov vo svojich regulárnych výrazoch. Špeciálne znaky nepredstavujú doslovný znak, ale robia váš regulárny výraz výraznejším.
Môžete ich použiť na určenie, že časť vzoru sa má opakovať určitý počet krát, alebo na označenie, že časť vzoru je voliteľná.
Príkladom špeciálneho znaku je „*“. Znak „*“ upravuje buď jeden znak, alebo skupinu znakov, ktoré sú pred ním. Vyhlasuje, že tieto znaky môžu chýbať alebo sa môžu opakovať koľkokrát za sebou. Napríklad:
/abc*/
Zhoduje sa s „ab“ nasledovaným ľubovoľným počtom znakov „c“. Reťazec "ab" je platným príkladom tohto vzoru, pretože znak "c" je voliteľný. Reťazce "abc" a "abccccc" sú rovnako platné, pretože "*" znamená, že "c" sa môže opakovať ľubovoľný počet krát.
Úplná syntax regulárneho výrazu používa niekoľko ďalších znakov vzoru na popis možných zhôd. Viac sa môžete dozvedieť od Regex 101 od regexlearn.com interaktívny kurz. Sprievodca JavaScriptom MDN je tiež veľmi užitočný.
Overenie formulára s regulárnymi výrazmi
Regulárny výraz môžete použiť na overenie zadania formulára niekoľkými spôsobmi. Prvým spôsobom je použitie JavaScriptu. Zahŕňa niekoľko krokov:
- Získajte hodnotu vstupného formulára.
- Skontrolujte, či sa hodnota vstupu zhoduje s regulárnym výrazom.
- Ak nie, zobrazte používateľovi webovej lokality, že hodnota vstupného poľa je neplatná.
Tu je krátky príklad. Vzhľadom na takéto vstupné pole:
<vstupný zástupný symbol="Vstupné pole">Môžete napísať funkciu na jej overenie takto:
funkciupotvrdiť() {
nech hodnota = dokument.querySelector("vstup").hodnota;
konšt regulárny výraz = /^.{3,7}$/;
vrátiť regEx.test (hodnota);
}Ďalším spôsobom je využiť možnosti prehliadača na overenie formulárov HTML. Ako? Zadaním regulárneho výrazu ako hodnoty atribútu vzor vstupnej značky HTML.
Atribút vzoru je platný len pre nasledujúce typy vstupu: text, tel. číslo, e-mail, adresa URL, heslo a vyhľadávanie.
Tu je príklad použitia atribútu vzor:
<formulár>
<vstupný zástupný symbol="Vstupné pole" požadovaný vzor ="/^.{3,7}$/">
<tlačidlo>Predložiť</button>
</form>Ak odošlete formulár a hodnota vstupu sa nezhoduje s celým regulárnym výrazom, vo formulári sa zobrazí predvolená chyba, ktorá vyzerá takto:
Ak je regulárny výraz dodaný do atribútu vzoru neplatný, prehliadač bude atribút ignorovať.
Bežné vzory regulárneho výrazu na overenie formulára
Vytvorenie a odladenie regulárneho výrazu od začiatku môže chvíľu trvať. Tu je niekoľko príkazov regulárneho výrazu, ktoré môžete použiť na overenie niektorých najbežnejších typov údajov formulára.
Regulárny výraz na overenie dĺžky reťazca
Jednou z najbežnejších požiadaviek na overenie je obmedzenie dĺžky reťazca. Regulárny výraz, ktorý bude zodpovedať reťazcu so siedmimi znakmi, je:
/^.{7}$/"." je zástupný symbol, ktorý sa zhoduje s ľubovoľným znakom, a „7“ v zložených zátvorkách určuje limit dĺžky reťazca. Ak by mal byť reťazec v určitom rozsahu dĺžky, napríklad medzi tromi a siedmimi, regulárny výraz by namiesto toho vyzeral takto:
/^.{3,7}$/A ak by reťazec potreboval mať aspoň tri znaky bez horného limitu, vyzeral by takto:
/^.{3,}$/Je nepravdepodobné, že dĺžka bude jedinou požiadavkou na overenie vstupu formulára. Často ho však použijete ako súčasť komplikovanejšieho regulárneho výrazu vrátane ďalších podmienok.
Regulárny výraz na overenie polí obsahujúcich iba písmená
Niektoré vstupy formulára nemusia obsahovať nič iné ako písmená, aby boli platné. Nasledujúci regulárny výraz bude zodpovedať iba takýmto reťazcom:
/^[a-zA-Z]+$/Tento regulárny výraz určuje znakovú sadu pozostávajúcu z celej abecedy. Špeciálny znak „+“ znamená, že predchádzajúci znak sa musí vyskytovať aspoň raz, bez horného limitu.
Regulárny výraz na overenie iba číselných polí
Nasledujúci regulárny výraz sa bude zhodovať iba s reťazcami zloženými výlučne z číslic:
/^\d+$/Vyššie uvedený regulárny výraz je v podstate rovnaký ako predchádzajúci. Jediný rozdiel je v tom, že používa špeciálny znak "\d" na vyjadrenie rozsahu číslic namiesto ich vypisovania.
Regulárny výraz na overenie alfanumerických polí
Regulárne výrazy tiež uľahčujú overenie alfanumerických polí. Tu je regulárny výraz, ktorý bude zodpovedať iba reťazcom zloženým z písmen a číslic:
/^[a-zA-Z\d]+$/Niektoré polia sú alfanumerické, ale umožňujú použitie niekoľkých ďalších znakov, ako sú spojovníky a podčiarkovníky. Jedným z príkladov takýchto polí je používateľské meno. Nižšie je uvedený regulárny výraz, ktorý sa zhoduje s reťazcom zloženým z písmen, číslic, podčiarkovníkov a pomlčiek:
/^(\w|-)+$/Špeciálny znak "\w" zodpovedá celej triede znakov, ako napríklad "\d". Predstavuje rozsah abecedy, číslic a znaku podčiarknutia („_“).
Regulárny výraz na overenie telefónnych čísel
Telefónne číslo môže byť zložité pole na overenie, pretože rôzne krajiny používajú rôzne formáty. Veľmi všeobecným prístupom je zabezpečiť, aby reťazec obsahoval iba číslice a aby jeho dĺžka bola v určitom rozsahu:
/^\d{9,15}$/Sofistikovanejší prístup môže vyzerať ako tento MDN, ktorá overuje telefónne čísla vo formáte ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Regulárny výraz na overenie dátumov
Rovnako ako telefónne čísla, aj dátumy môžu mať viacero formátov. Dátumy sú zvyčajne menej komplikované na overenie ako telefónne čísla. prečo? Dátumy neobsahujú žiadne iné znaky ako číslice a spojovníky.
Tu je príklad, ktorý overí dátumy vo formáte „DD-MM-RRRR“.
/^\d{2}-\d{2}-\d{4}$/Overenie pomocou Regex je jednoduché
Regulárne výrazy popisujú vzory, ktoré zodpovedajú kombináciám znakov v reťazcoch. Majú rôzne aplikácie, ako napríklad overovanie používateľských vstupov z formulárov HTML.
Regulárny výraz môžete použiť na overenie pomocou JavaScriptu alebo prostredníctvom atribútu vzoru HTML. Je ľahké vytvoriť regulárne výrazy na overenie bežných typov vstupov do formulárov, ako sú dátumy a používateľské mená.