Intro Into do HTML5 ověření vazby

Interaktivní webové stránky a aplikace nelze představit bez formulářů, které nám umožňují spojení s našimi uživateli, a získat data potřebujeme, abychom s nimi zajistili hladké transakce. Potřebujeme platný vstup uživatele, musíme ji však získat tak, aby to bylo možné není frustrující našich uživatelů.

I když můžeme vylepšit použitelnost našich formulářů s inteligentně vybranými vzory návrhu UX, HTML5 má také nativní mechanismus pro validaci omezení, který nám umožňuje zachytit vstupní chyby přímo na front-end.

V tomto příspěvku se zaměříme na ověření prohlížečem, a podívejte se, jak mohou vývojáři frontendu zabezpečit platný vstup uživatele pomocí HTML5.

Proč potřebujeme ověření front-end vstupů

Ověřování vstupu má dva hlavní cíle. Potřebný obsah musí být:

1. Užitečné

Potřebujeme použitelných dat, se kterými můžeme pracovat. Musíme lidi vstoupit realistická data ve správném formátu. Například nikdo, kdo je dnes naživu, se narodil před 200 lety. Získání dat, jako je tento, se může na první pohled zdát vtipné, ale z dlouhodobého hlediska je to nepříjemné a zaplňuje naši databázi zbytečnými daty.

2. Zabezpečení

Když se odvoláváme na bezpečnost, znamená to, že musíme zabránit vniknutí škodlivého obsahu - úmyslné nebo nehody.

Lze dosáhnout užitečnosti (získání přiměřených dat) pouze na straně klienta, backend tým s tím moc nepomůže. Dosáhnout bezpečnostní, přední a zadní vývojáři potřebují spolupracovat.

Pokud vývojáři frontendu správně ověřují vstup na straně klienta, backend tým se bude muset vypořádat s mnohem menší zranitelností. Hacking (místo) často znamená odeslání dodatečných údajů, nebo data ve špatném formátu. Vývojáři mohou bojovat s bezpečnostními dírami, jako jsou tyto, úspěšně bojovat z front-endu.

Tento průvodce zabezpečení PHP například doporučuje zkontrolovat vše, co můžeme na straně klienta. Zdůrazňují důležitost validace vstupu frontendem tím, že poskytují mnoho příkladů, jako jsou:

"Ověřování vstupu funguje nejlépe s extrémně omezenými hodnotami, např. Když něco musí být celé číslo nebo alfanumerický řetězec nebo adresa URL HTTP."

Při ověřování vstupu na frontend je naší úlohou přiměřená omezení na vstupu uživatele. Funkce ověřování omezení HTML5 nám poskytuje prostředky k tomu.

Validace omezení HTML5

Před HTML5 byli vývojáři frontendu omezeni na ověření vstupu uživatele pomocí JavaScriptu, který byl zdlouhavý a náchylný k chybám. Pro zlepšení ověření formuláře na straně klienta zavedla HTML5 a validace omezení algoritmus, který běží v moderních prohlížečích, a kontroluje platnost zadaného vstupu.

K provedení vyhodnocení algoritmus používá atributy související s validací vstupních prvků, jako , </code>, a <code><select></code>. Pokud se chcete dozvědět, jak se v prohlížeči provádí ověření platnosti, krok za krokem se podívejte na tento dokument WhatWG doc.</p> <p>Díky funkci ověřování omezení HTML5 můžeme provést všechny <strong>standardní úlohy validace vstupů</strong> na straně klienta <strong>bez JavaScriptu, pouze s HTML5</strong>.</p> <p>Pro provádění složitějších úkolů souvisejících s validací nám HTML5 poskytuje a <strong>API API pro ověření omezení</strong> můžeme použít k nastavení vlastních ověřovacích skriptů.</p> <h4>Ověřte pomocí sémantických vstupních typů</h4> <p>Zavedeno HTML5 <strong>typy sémantických vstupů</strong> krom toho, že - kromě označení prvku pro uživatele agentů - lze také použít <strong>ověření vstupu uživatele</strong> omezením uživatelů na určitý vstupní formát.</p> <p>Kromě typů vstupů, které již existovaly před HTML5 (<code>text</code>, <code>Heslo</code>, <code>Předložit</code>, <code>resetovat</code>, <code>rádio</code>, <code>zaškrtávací políčko</code>, <code>tlačítko</code>, <code>skrytý</code>), můžeme použít i následující <strong>sémantické typy vstupů HTML5</strong>: <code>e-mailem</code>,<code>tel</code>,<code>url</code>,<code>číslo</code>,<code>čas</code>,<code>datum</code>,<code>čas schůzky</code>,<code>datetime-local</code>, <code>Měsíc</code>,<code>týden</code>, <code>rozsah</code>, <code>Vyhledávání</code>,<code>barva</code>.</p> <p>Můžeme bezpečně používat vstupní typy HTML5 se staršími prohlížeči, protože se budou chovat jako <code><input type="text"></code> v prohlížečích, které je nepodporují.</p> <p>Uvidíme, co se stane, když uživatel zadá nesprávný typ vstupu. Řekněme, že jsme vytvořili vstupní pole e-mailu s následujícím kódem:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Tvůj e-mail:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Když uživatel zadá řetězec, který nepoužívá formát e-mailu, algoritmus ověření platnosti omezení <strong>formulář neodesílá</strong>, a <strong>vrátí chybovou zprávu</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Stejné pravidlo platí i pro jiné typy vstupů, například pro <code>type = "url"</code> uživatelé mohou odesílat pouze vstup, který následuje ve formátu URL (začíná protokolem, například <code>http: //</code> nebo <code>ftp: //</code>).</p> <p>Některé typy vstupů používají design <strong>neumožňuje uživatelům zadávat nesprávný vstupní formát</strong>, například <code>barva</code> a <code>rozsah</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Barva pozadí:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Pokud použijeme <code>barva</code> typ vstupu je uživatel omezen buď na výběr barvy z výběru barvy, nebo na výchozí barvu. Vstupní pole je <strong>omezena designem</strong>, proto nezanechává velkou šanci na chybu uživatele.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Když je to vhodné, stojí za zvážení použití <code><select></code> HTML tag, který funguje podobně jako tyto typy vstupů s omezeným designem; umožňuje uživatelům vybírat z rozevíracího seznamu.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Vaše oblíbené ovoce:</label> <select name="fruit"> <option value="apple">Jablko</option> <option value="pear">Hruška</option> <option value="orange">oranžový</option> <option value="raspberry">Malina</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Použít atributy ověření HTML5</h4> <p>Použití sémantických vstupních typů nastavuje určitá omezení na to, co mohou uživatelé odesílat, ale v mnoha případech chceme jít o něco dále. To je, když <strong>atributy související s validací</strong> z <code><input></code> tag nám může pomoci ven.</p> <p>Atributy související s ověřováním patří určitým typům vstupů (nelze na ně použít <em>Všechno</em> typy), na které ukládají další omezení.</p> <h5>1. <code>Povinný</code> pro získání platného vstupu všemi prostředky</h5> <p> <code>Povinný</code> atribut je nejznámější atribut validace HTML. To je <strong>atribut boolean</strong> to znamená <strong>nemá žádnou hodnotu</strong>, prostě to musíme umístit dovnitř <code><input></code> pokud ho chceme použít:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Pokud uživatel zapomene zadat hodnotu do požadovaného vstupního pole, prohlížeč <strong>vrátí chybovou zprávu</strong> který je varuje, aby vyplnili pole, a oni <strong>formulář nelze odeslat</strong> dokud neposkytnou platný vstup. Proto je důležité vždy <strong>vizuálně</strong> uživatelům.</p> <p> <code>Povinný</code> atribut může být <strong>spolu s následujícími typy vstupů</strong>: <code>text</code>, <code>Vyhledávání</code>, <code>url</code>, <code>tel</code>, <code>e-mailem</code>, <code>Heslo</code>, <code>datum</code>, <code>čas schůzky</code>, <code>datetime-local</code>, <code>Měsíc</code>, <code>týden</code>,<code>čas</code>, <code>číslo</code>, <code>zaškrtávací políčko</code>, <code>rádio</code>, <code>soubor</code>, plus s <code><textarea></code>a <code><select></code> Značky HTML.</p> <h5>2. <code>min</code>, <code>max</code> a <code>krok</code> pro validaci čísla</h5> <p> <code>min</code>, <code>max</code> a <code>krok</code> atributy nám umožňují <strong>dát omezení na vstupní pole čísel</strong>. Mohou být použity společně s <code>rozsah</code>, <code>číslo</code>, <code>datum</code>, <code>Měsíc</code>, <code>týden</code>, <code>čas schůzky</code>, <code>datetime-local</code>, a <code>čas</code> vstupních typů.</p> <p> <code>min</code> a <code>max</code> Atributy poskytují skvělý způsob, jak snadno <strong>vyloučit nepřiměřené údaje</strong>. Příklad níže nutí uživatele, aby odeslali věk mezi 18 a 120 lety.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Tvůj věk:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Když algoritmus validace vazby narazí do uživatelského vstupu menšího než <code>min</code>, nebo větší než <code>max</code> brání dosažení backendu a vrátí chybovou zprávu.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p> <code>krok</code> atribut <strong>určuje číselný interval</strong> mezi právními hodnotami numerického vstupního pole. Pokud například chceme, aby si uživatelé vybrali pouze z přestupných let, můžeme přidat <code>step = "4"</code> atributu pole. V příkladu níže jsem použil <code>číslo</code> typ vstupu, protože není <code>type = "year"</code> v HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Váš oblíbený rok přerušení:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>S přednastavenými omezeními si uživatelé mohou vybrat pouze z přestupných let mezi lety 1972 a 2016, pokud používají malou šipku nahoru, která je součástí dodávky. <code>číslo</code> Typ vstupu. Také mohou ručně zadat hodnotu do vstupního pole, ale v případě, že nesplňuje omezení, prohlížeč vrátí chybovou zprávu.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maximální délka</code> pro validaci délky textu</h5> <p> <code>maximální délka</code> tento atribut umožňuje <strong>nastavte maximální délku znaků</strong> pro textová vstupní pole. Lze jej použít společně s <code>text</code>, <code>Vyhledávání</code>, <code>url</code>, <code>tel</code>, <code>e-mailem</code> a <code>Heslo</code> vstupních typů a pomocí <code><textarea></code> HTML tag.</p> <p> <code>maximální délka</code> atribut může být vynikajícím řešením pro pole telefonních čísel, která nemohou mít více než určitý počet znaků, nebo pro kontaktní formuláře, kde nechceme, aby uživatelé psali více než určitou délku.</p> <p>Níže uvedený úryvek kódu ukazuje příklad pro druhý, omezuje zprávy uživatele na 500 znaků. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Zpráva (max. 500 znaků):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

maximální délka atribut nevrátí chybovou zprávu, ale prohlížeč jednoduše nedovolí uživatelům zadat více než zadané číslo znaku. Proto je zásadní informovat uživatele o omezení, jinak nechápou, proč nemohou pokračovat s psaním.

 
 * Vaše heslo: