Jedním z nejdůležitějších bodů ve vývoji webu, který je někdy opomíjen nebo kterému není věnována nezbytná pozornost, je validace formuláře a z polí, která je obsahují, se tyto validace pohybují od hodnot, které mohou akceptovat, od jejich délky až po skutečnost, zda jsou nezbytné nebo ne.
Tyto validace souboru na straně klienta v minulosti je prováděl Javascript budování těžkopádných funkcí k ověření několika polí a získání výsledků, které nebyly vždy nejoptimálnější, bylo také vybráno pro ověření na straně serveru ale to uživateli neposkytlo přátelský zážitek, protože nejprve jsme museli zpracovat data a počkat na odpověď ze serveru, abychom ověřili, že všechna naše data byla správná.
Po čase, kdy jsem pracoval úhledně Javascript Chcete -li provádět všechny druhy operací na straně klienta, zdá se, že rámce usnadňují práci, mezi nimi i jednu z nejznámějších: jQuery; S předdefinovanou strukturou a čistším a optimálnějším způsobem provádění věcí bylo možné zanechat všech špatných postupů a poskytnout vývojáři mnohem komplexnější nástroj k dosažení těchto operací, včetně validací.
Ale i když jQuery usnadnilo mnoho operací na straně klienta, ještě nebylo vyvinuto něco, co by přímo útočilo na problém validací, proto byl plugin Validátor bootstrapu který využívá všech výhod jQuery a rámec HTML5 Y CSS3, Bootstrap.
1. Validátor bootstrapu
Validátor bootstrapu je plugin, ze kterého vychází jQuery Y Bootstrap, umožňuje ověřit formuláře i prvky v něm pomocí jednoduchého zahrnutí knihoven pluginů a použití jeho výkonných, ale jednoduchých API, aniž bychom zapomněli na všechny vlastnosti, které má, podívejme se na některé z nich:
- Integrace s fonty a styly Bootstrap.
- Předdefinovaná ověření polí, která zahrnují: délku obsahu, data, kreditní karty, telefony, e -mail a další.
- Vlastní ověření pro pole.
- Možnost přidání více validací na pole.
- Možnost zobrazení ikony zpětné vazby podle výsledku validace.
- Možnost použití zpráv v HTML podle výsledku validace.
Jak jsme mohli vidět, tyto vlastnosti z něj dělají možnost číslo jedna, kterou je třeba zvážit při implementaci validací do našich projektů.
Co potřebujeme k použití?Umět používat Validátor bootstrapu musíme zahrnout jQuery ve své nejnovější verzi pokud možno, Bootstrap z vaší verze 3.x a soubory .css Y .js z knihkupectví. Kromě toho budeme muset mít instalaci webového serveru jako Wamp pokud pracujeme na Okna nebo Svítilna v Linux.
2. Validátory
Než se dostanete do praktické části tohoto kurzu, je důležité znát některé z nejdůležitějších validátorů, které používá. Validátor bootstrapu pro zpracování validací ve formulářích se podívejme na:
base64Ověří řetězec znaků zakódovaných na bázi 64.
meziZkontrolujte, zda je hodnota pole striktně mezi dvěma danými čísly nebo ne.
kreditní kartaOvěřte číslo kreditní karty.
datumOvěřte datum podle určitých možností, mezi nimiž vyniká formát, maximální, minimální datum a dokonce i oddělovač.
čísliceVrací hodnotu true nebo true, pokud hodnota obsahuje pouze čísla.
emailová adresaJak naznačuje jeho název, ověřuje e -mailovou adresu.
regexpOvěří, zda se daná hodnota shoduje nebo odpovídá regulárnímu výrazu Javascript.
Toto je jen malá ukázka kompletního repertoáru validátorů, které v sobě máme Validátor bootstrapuÚplný seznam validátorů můžeme zadat zde a zkontrolovat ten, který nejlépe vyhovuje našim potřebám:
3. Přihlašovací formulář
Jedním z nejdůležitějších aspektů každého aktuálního webu je přihlašovací formulář, kde naši uživatelé mohou zadat své uživatelské jméno a heslo na naši stránku a využívat další výhody při přihlašování.
Validátor bootstrapu umožňuje nám navíc tato dvě pole ověřit několika jednoduchými řádky kódu Bootstrap nám umožňuje dát mu další nádech tím, že nám umožňuje jednoduchým způsobem implementovat modální okno, a tak vytvořit přihlašovací formulář, který bude vypadat profesionálně a příjemně pro oko uživatele.
Protože nebudeme provádět žádné úpravy zdrojového kódu žádného z výše uvedených souborů, zahrneme je z jejich příslušných CDN, nejprve zahrneme soubory .css tolik z Boostrap jako Validátor bootstrapu:
Nyní zahrneme soubory .js a abychom měli mnohem čistší strukturu, oddělíme kód našich validací v souboru s názvem validator.js:
Pak využijeme výhody Bootstrap vybudovat naše modální okno, které pouhou aplikací nezbytných tříd na prvky, které jej tvoří, se použije požadovaná funkce:
přihlašovací formulář×Podívejme se, jak náš příklad zatím vypadá, když jej spustíme v prohlížeči:Přihlásit se
Uživatelské jménoHesloPřihlásit se
Naše modální okno již funguje společně s formulářem, nyní musíme zahrnout pouze ověření pomocí Validátor bootstrapuZa tímto účelem inicializujeme a document.ready v našem souboru validator.js a v rámci toho zavoláme metodu boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({zpráva: 'Tato hodnota není platná', feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, pole: {uživatel: {validators: {notEmpty: {message: 'Username is required'}}}, heslo: {validators: {notEmpty: {message: 'Password is required'}}}}}); První věcí, které bychom si v tomto kódu měli všimnout, je použití voliče k inicializaci metody, v tomto případě použijeme ID formuláře, který se nazývá přihlašovací formulář, to projít Strom DOM a dostat se k položkám pod ním v hierarchii. Poté definujeme obecnou zprávu a ikony zpětné vazby, abychom v případě úspěchu nebo chyby při validaci dali vizuální podobu našemu formuláři.
Konečně máme svá ověření a jak můžeme na první pohled vidět, že je to něco extrémně čitelného a nepřekonatelné jednoduchosti, uvedeme název polí našich formulářů a v tomto příkladu použijeme jediné ověření, které bude povinné pole, ale jak jsme poznamenali, může jich být více než jedno na pole.
Podívejme se na následujícím obrázku, jak vypadá náš formulář, když se pokusíme odeslat informace, aniž bychom vyplnili pole:
Jak vidíme, jak naše ověřování funguje, a dokud do polí nezadáte informace, formulář neprovede Předložit Protože je tlačítko ve výchozím nastavení zakázáno, podívejme se na následujícím obrázku, jak vypadá náš formulář, když zadáme potřebná data a podle toho se změní ikony zpětné vazby:
Za několik minut jsme mohli díky všem vytvořit přihlašovací formulář s příslušnými ověřováními na straně klienta Validátor bootstrapu.
4. Registrační formulář
Předchozí případ je jednoduchý a docela užitečný, ale není jediným, který je ve vývoji, existují registrační formuláře, které obsahují mnohem více polí a omezení týkající se zadávaných informací jsou různá.
To v minulosti představovalo problém, protože v závislosti na počtu polí bylo nutné provést počitadlo a ověřit pole po poli, a když tento čítač dosáhl určitého počtu, znamenalo to, že nedošlo k žádným chybám, a to bez zapomenutí na jednotlivá ověření každé pole, například formáty data, které budou přijímat pouze čísla nebo dokonce délku pole.
S Validátor Boostrapu a jeho předdefinované validátory nám v tomto úkolu pomáhají jednoduchým a rychlým způsobem, podívejme se:
Nejprve zahrneme soubory .css Y .js které jsme použili v předchozím příkladu, navíc zahrneme některé knihovny, abychom mohli používat výběr dat z Boostrap:
Jakmile to bude hotové, sestavíme náš formulář a každému poli dáme odpovídající název:
Podívejme se, jak tento formulář vypadá v našem prohlížeči:Registrační formulář
JménaPříjmeníE-mailemHesloDatum narození*****mužskýŽenskýTelefonMobilní telefonPřihlásit se
Než přejdeme k ověřování, je důležité, abychom vložili naše výběr dat k tomu stačí do našeho souboru zahrnout následující řádky kódu validator.js a dejte mu ID, které má naše pole, ve tvaru:
$ (funkce () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Podívejme se, jak tento plugin vypadá:
Jak jsme viděli, formulář má smíšená pole, včetně textu, polí pro heslo, datového časovače a dokonce i přepínačů, ale to není problém pro Validátor bootstrapu, použijeme stejný soubor validator.js pro ověření musíme provést novou instanci metody boostrapValidator s ID nového formuláře a tam obsahovat stejné:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh'}, pole: {name: {validators: {notEmpty: {message: 'First name is required'}}}, last name: {validators: {notEmpty: {message: 'Last name is required'}}}, email: {validators: {notEmpty: {message: ' E -mail je povinný a nesmí být prázdný '}, emailAddress: {zpráva:' E -mail není platný '}}}, heslo: {validators: {notEmpty: {message:' Heslo je povinné a nemůže být prázdné '}, stringLength: {min: 8, message: 'Heslo musí obsahovat alespoň 8 znaků'}}}, datetimepicker: {validators: {notEmpty: {message: 'The date of narodenia is required and cannot be empty'}, date: {formát: 'RRRR-MM-DD', zpráva: 'Datum narození není platné'}}}, *****: {validators: {notEmpty: {message: 'The *****is required '}}}, telefon: {zpráva:' Telefon or is not valid ', validators: {notEmpty: {message:' The phone is required and cannot be empty '}, regexp: {regexp: / [0-9] + $ /, message:' The phone can only be obsahovat čísla '}}}, telefono_cel: {zpráva:' Telefon není platný ', validátory: {regexp: {regexp: / [0-9] + $ /, zpráva:' Telefon může obsahovat pouze čísla '} }},}}); Můžeme vidět, že pro první dvě ověření jsou podobná předchozímu příkladu, ale když najdeme pole e -mailu, vidíme, že má ověření požadovaného pole a navíc s validátorem emailová adresa Ověřujeme, že se jedná o platný e -mail, podívejme se, jak se toto ověření chová:
S výběrčí dat Nemáme problémy se zadáváním dat, ale pokud to chceme obdržet co nejčistším způsobem, můžeme formát ověřit, jak vidíme v následujícím ověření, kde označujeme, že formát by měl být RRRR-MM-DD na co platí:
Můžeme dokonce ověřit, kolik znaků může heslo obsahovat stringLength a možnost min:
Abychom dokončili a předvedli sílu tohoto pluginu, který hodláme ověřit telefon, mohli bychom použít validátor číslic, ale v tomto případě použijeme něco složitějšího, jako je regulární výraz, a nejlepší ze všeho je, že již máme validátor pro že regexp, Podívejme se, jak to funguje v naší podobě:
Když jsme již otestovali, že všechny naše validace fungují správně, opravíme všechny informace v našem formuláři a uvidíme, jak to vypadá s příslušnými informacemi:
Tímto dokončujeme tento tutoriál, ve kterém jsme se naučili používat validace Validátor Boostrapu, výkonný plugin, který nevyžaduje instalaci ani konfiguraci a který nám umožňuje rychle a snadno ověřit naše formuláře pomocí několika jednoduchých řádků kódu.
