Ověření zadávání dat pomocí AngularJS

Když pracujeme na vytváření jednostránkových aplikací, jedním z bodů, které můžeme zdůraznit, je zadávání dat, tento typ funkcí se obvykle provádí pomocí formulářJe zřejmé, že pokud budeme požadovat data od uživatele, musíme ověřit, že u nich nedochází k chybám.
naštěstí AngularJS Má některé interní mechanismy, které nám umožňují provádět validace jednoduchým způsobem, což umožňuje odeslání formuláře pouze při splnění podmínek formátu dat.
První věc, kterou budeme potřebovat, je a formulář„Umístíme některá pole, například jméno, příjmení a pole e -mailu, obecně se jedná o nejpoužívanější typy polí, což nám poskytne příležitost generovat ověření. Podívejme se na počáteční kód, který máme:

Název:Příjmení:E-mailem:Stáří:Poslat

Pokud se podíváme, použili jsme vlastnosti HTML k ověření polí, například umístěním vlastnosti Požadované u požadovaných polí si budou myslet, že to bude fungovat pouze v novějších nebo kompatibilních prohlížečích HTML5 pouze, ale když používáme AngularJS, vyplní alternativní ověření, pokud aplikaci otevřeme v prohlížeči, který není kompatibilní s HTML5.
Vidíme, že věkové pole má kromě ověření typu dvě vlastnosti AngularJS které jsou pro délku pole, to znamená, že celkem můžeme umístit pouze čísla mezi 1 a 3 číslicemi.
S cvičením se nám zatím daří, musíme však stále ověřit, že k odeslání dat musí být vše validováno, k tomu musíme vygenerovat správce, který nám to umožní, k tomu uvedeme do formuláře, který ovladač bude používat, my změníme řádek:

Podle následujícího:

Uvnitř ovladače můžeme přistupovat k vlastnosti s názvem $ platné, což je ten, který bude indikovat, zda je náš formulář platný pro odesílání dat, proto musíme upravit řádek tlačítka pro odeslání dat následujícím způsobem:

Poslat

Provedení úpravy by mělo být následující:

Poslat

Nakonec můžeme vytvořit náš správce v AngularJS, se kterým budeme zpracovávat naše data:

 funkce AddControllerUser ($ scope) {$ scope.message = ''; $ scope.addUser = function () {$ scope.message = 'Díky,' + $ scope.user.name + ', bylo přidáno!'; }; } 

To by nám v našem prohlížeči mělo poskytnout výsledek jako následující:

Vidíme, že protože neexistují žádná data, tlačítko odeslání je deaktivováno, to se změní, když vyplníme příslušná data, jak vidíme na následujícím obrázku:

Pokud bychom umístili e -mail v nesprávném formátu, tlačítko by nebylo aktivováno, pak uvidíme, jak AngularJS Usnadnilo nám to vývoj v něčem tak jednoduchém, jako je forma, a tím jsme dokončili tento tutoriál, byli jsme schopni ověřit formulář úplným způsobem, pouze pomocí vlastností HTML5 A trochu AngularJS.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod