Každý webový vývojář ten pocit zná: vytvořili jste formulář a zasténáte, když si uvědomíte, že nyní musíte ověřit každé pole.
Naštěstí ověření formuláře nemusí být bolestivé. Regulární výrazy můžete použít ke zpracování mnoha běžných potřeb ověřování.
Co jsou regulární výrazy?
Regulární výrazy popisují vzory, které odpovídají kombinacím znaků v řetězcích. Můžete je použít k reprezentaci pojmů jako „pouze čísla“ nebo „přesně pět velkých písmen“.
Regulární výrazy (také nazývané regex) jsou mocné nástroje. Mají mnoho použití, včetně pokročilého vyhledávání, hledání a nahrazování a ověřování řetězců. Jedna slavná aplikace regulárních výrazů je příkaz grep v Linuxu.
Proč používat k ověření regulární výrazy?
Je jich mnoho způsoby, jak ověřit zadání formuláře, ale regulární výrazy jsou jednoduché, rychlé a pohodlné, pokud rozumíte jak.
JavaScript má nativní podporu pro regulární výrazy. To znamená, že jejich použití pro ověřování na rozdíl od externí knihovny pomáhá udržovat velikost vaší webové aplikace co nejmenší.
Regulární výrazy jsou také schopné ověřit mnoho typů vstupních formulářů.
Základy regulárních výrazů
Regulární výrazy se skládají ze symbolů, které popisují vzory tvořené znaky v řetězci. V JavaScriptu můžete vytvořit literál regulárního výrazu jeho napsáním mezi dvě lomítka. Nejjednodušší forma regulárního výrazu vypadá takto:
/abc/Výše uvedený regulární výraz bude odpovídat libovolnému řetězci, který obsahuje znaky "a", "b" a "c" v tomto pořadí, po sobě. Řetězec "abc" bude odpovídat tomuto regulárnímu výrazu, stejně jako řetězec jako "abcdef".
Pokročilejší vzory můžete popsat pomocí speciálních znaků v regulárních výrazech. Speciální znaky nepředstavují doslovný znak, ale činí váš regulární výraz výraznějším.
Můžete je použít k určení, že se část vzoru má opakovat určitý počet opakování, nebo k označení, že některý vzor je volitelný.
Příkladem speciálního znaku je "*". Znak "*" upravuje buď jeden znak, nebo skupinu znaků, které jsou před ním. Prohlašuje, že tyto znaky mohou chybět nebo se mohou opakovat kolikrát za sebou. Například:
/abc*/
Bude odpovídat „ab“ následovanému libovolným počtem znaků „c“. Řetězec "ab" je platným příkladem tohoto vzoru, protože znak "c" je volitelný. Řetězce "abc" a "abccccc" jsou stejně platné, protože "*" znamená, že "c" se může opakovat kolikrát.
Úplná syntaxe regulárního výrazu používá několik dalších znaků vzoru k popisu možných shod. Více se můžete dozvědět od Regex 101 od regexlearn.com interaktivní kurz. Průvodce JavaScriptem MDN je také velmi užitečné.
Ověření formuláře s regulárními výrazy
Regulární výraz můžete použít k ověření vstupu formuláře několika způsoby. Prvním způsobem je použití JavaScriptu. Zahrnuje několik kroků:
- Získejte hodnotu vstupu formuláře.
- Zkontrolujte, zda hodnota vstupu odpovídá regulárnímu výrazu.
- Pokud tomu tak není, zobrazte uživateli webu, že hodnota vstupního pole je neplatná.
Zde je krátký příklad. Vzhledem k vstupnímu poli, jako je toto:
<vstupní zástupný symbol="Vstupní pole">Můžete napsat funkci pro její ověření takto:
funkceověřit() {
nechat hodnota = dokument.querySelector("vstup").hodnota;
konst regulární výraz = /^.{3,7}$/;
vrátit se regEx.test (hodnota);
}Dalším způsobem je využít možnosti prohlížeče pro ověření formuláře HTML. Jak? Zadáním regulárního výrazu jako hodnoty atributu pattern vstupní značky HTML.
Atribut pattern je platný pouze pro následující typy vstupu: text, tel, email, url, heslo a vyhledávání.
Zde je příklad použití atributu pattern:
<formulář>
<vstupní zástupný symbol="Vstupní pole" požadovaný vzor ="/^.{3,7}$/">
<knoflík>Předložit</button>
</form>Pokud odešlete formulář a hodnota vstupu neodpovídá celému regulárnímu výrazu, ve formuláři se zobrazí výchozí chyba, která vypadá takto:
Pokud je regulární výraz dodaný do atributu pattern neplatný, prohlížeč bude atribut ignorovat.
Společné vzory regulárních výrazů pro ověření formuláře
Vytvoření a ladění regulárního výrazu od začátku může nějakou dobu trvat. Zde jsou některé příkazy regulárního výrazu, které můžete použít k ověření některých nejběžnějších typů dat formuláře.
Regulární výraz pro ověření délky řetězce
Jedním z nejběžnějších požadavků na ověření je omezení délky řetězce. Regulární výraz, který bude odpovídat sedmimístnému řetězci, je:
/^.{7}$/"." je zástupný symbol, který odpovídá libovolnému znaku, a "7" ve složených závorkách určuje limit délky řetězce. Pokud by měl být řetězec v určitém rozsahu délky, například mezi třemi a sedmi, regulární výraz by místo toho vypadal takto:
/^.{3,7}$/A pokud by řetězec potřeboval mít alespoň tři znaky bez horního limitu, vypadal by takto:
/^.{3,}$/Je nepravděpodobné, že délka bude jediným požadavkem pro ověření vstupu formuláře. Často jej ale použijete jako součást složitějšího regulárního výrazu včetně dalších podmínek.
Regulární výraz pro ověření polí obsahujících pouze písmena
Některé vstupy formuláře nemusí obsahovat nic jiného než písmena, aby byly platné. Následující regulární výraz bude odpovídat pouze takovým řetězcům:
/^[a-zA-Z]+$/Tento regulární výraz určuje znakovou sadu složenou z celé abecedy. Speciální znak „+“ znamená, že předchozí znak se musí vyskytovat alespoň jednou, bez horního limitu.
Regulární výraz pro ověření číselných polí
Následující regulární výraz bude odpovídat pouze řetězcům složeným výhradně z číslic:
/^\d+$/Výše uvedený regulární výraz je v podstatě stejný jako předchozí. Jediný rozdíl je v tom, že používá speciální znak "\d" pro reprezentaci rozsahu číslic, místo aby je vypisoval.
Regulární výraz pro ověření alfanumerických polí
Regulární výrazy také usnadňují ověření alfanumerických polí. Zde je regulární výraz, který bude odpovídat pouze řetězcům složeným z písmen a číslic:
/^[a-zA-Z\d]+$/Některá pole jsou alfanumerická, ale umožňují použití několika dalších znaků, jako jsou pomlčky a podtržítka. Jedním z příkladů takových polí je uživatelské jméno. Níže je uveden regulární výraz, který odpovídá řetězci složenému z písmen, číslic, podtržítek a pomlček:
/^(\w|-)+$/Speciální znak "\w" odpovídá celé třídě znaků, jako je tomu u "\d". Představuje rozsah abecedy, číslic a znaku podtržení („_“).
Regulární výraz pro ověření telefonních čísel
Telefonní číslo může být složité pole k ověření, protože různé země používají různé formáty. Velmi obecným přístupem je zajistit, aby řetězec obsahoval pouze číslice a aby jeho délka byla v určitém rozsahu:
/^\d{9,15}$/Sofistikovanější přístup by mohl vypadat jako tento převzatý MDN, která ověřuje telefonní čísla ve formátu ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Regulární výraz pro ověření dat
Stejně jako telefonní čísla mohou mít data také více formátů. Ověření dat je obvykle méně složité než ověření telefonních čísel. Proč? Data neobsahují žádné jiné znaky než číslice a pomlčky.
Zde je příklad, který ověří data ve formátu „DD-MM-RRRR“.
/^\d{2}-\d{2}-\d{4}$/Ověření pomocí Regex je snadné
Regulární výrazy popisují vzory, které odpovídají kombinacím znaků v řetězcích. Mají různé aplikace, jako je ověřování uživatelských vstupů z formulářů HTML.
Regulární výraz můžete použít k ověření pomocí JavaScriptu nebo pomocí atributu vzoru HTML. Je snadné vytvořit regulární výrazy pro ověření běžných typů formulářových vstupů, jako jsou data a uživatelská jména.
