Jak implementovat ověření formuláře v Angular JS?



Tento článek vám poskytne podrobné a komplexní znalosti o tom, jak implementovat ověření formuláře v Angular JS s příklady

Ověření je metoda ověřit uživatel. Používá se ve všech webových technologiích a . Ale dnes se budeme soustředit na Ověření v Angular JS v následujícím pořadí:

Co je ověření formuláře?

Ověření formuláře je technika, pomocí které můžeme ověřit formulář HTML. Vezměme si jednoduchý příklad, který předpokládá, že uživatel má formulář HTML a že formulář HTML má různá pole, tato pole jsou ověřena validátorem formulářů, když chceme ověřit formulář, stačí zkontrolovat hodnotu konkrétního pole pomocí výrazu validátoru .





validation-in-angular-jsPokud jsou regulární výraz a hodnota pole stejné, pak můžeme říci, že náš formulář je ověřen. Ve formuláři HTML existují různé typy ověření, jako je e-mail, povinné, minimální, maximální, heslo atd.

k čemu se nagios používá

Ověření formuláře v Angular JS

Pojďme si promluvit o tom, jak můžeme ověřit formulář v úhlovém JS. Angular JS poskytuje různé typy vlastností ověřování formulářů, které můžeme použít k ověření formuláře nebo k získání dat z formuláře.



  • $ platné : Tato vlastnost určuje, zda je pole platné nebo ne, a to pomocí příslušného pravidla.

  • $ neplatný : Jak název říká, že tato dlaždice je neplatná, počasí je pole neplatné nebo není založeno na příslušném pravidle.

  • $ nedotčené : Vrátí hodnotu true, vstupní pole formuláře se nepoužívá.



  • $ špinavý : Vrátí hodnotu true v použitém vstupním poli formuláře.

  • $ dojato : BooleanTrue, pokud byl vstup rozmazaný.

Přístup do formuláře: .

Přístup ke vstupu: ..

Nyní si vysvětlíme ověření formuláře v úhlovém JS na příkladu, takže nejprve vytvoříme dva soubory, jeden je app.js a druhý index.html. Náš soubor index.htm obsahuje jednoduchý formulář HTML, který má úhlové ověření, a náš soubor app.js obsahuje back-endový kód pro zpracování ověření formuláře na stránce index.html.

Theindex.htmlformulář obsahu stránky snovalidátmajetek a co to přesně znamená?

Vlastnost novalidate ve značce formuláře říká HTML, že můžeme použít naše vlastní ověření formuláře. Pokud nedáme vlastnost novalidate, pak se formulář HTML ověří pomocí výchozích vlastností ověření formuláře HTML5.

Kroky při ověřování formuláře

V našem formuláři jsme vytvořili 6 polí v našem formuláři, kterými jsou jméno, příjmení, e-mail, telefon, heslo a zpráva.

  1. Nejprve přidáme požadovaný validátor pole, tento validátor řekne uživatelům, že je vyžadováno konkrétní pole.

  2. Další je e-mailové pole, pokud uživatel neposkytne žádný platný e-mail, pak náš validátor e-mailu hodí chybu ověření e-mailu.

  3. V naší validaci hesla jsme nastavili minimální a maximální délku, minimální délka je 5 a maximální délka je 8, takže uživatel může zadat platné heslo mezi 5 až 8 znaky.

  4. Nakonec nastavíme požadovaná pole pro telefon a zprávy a konkrétně použijeme ověření čísla v telefonním seznamu.

Kód pro ověření formuláře v Angular JS

index.html

Příklad úhlového rozsahu Křestní jméno 

Toto pole je povinné

Příjmení

Toto pole je povinné

E-mailem

Toto pole je povinné

Není platný e-mail

Telefon

Toto pole je povinné

Toto není platný telefon

Heslo

Toto pole je povinné

Heslo mezi 5 až 8 znaky

Zpráva

Toto pole je povinné

Předložit

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', function ($ scope) {})

Pojďme si promluvit o nějaké validační směrnici použité ve formě:

  • ng-povinné : Za poskytnutí požadovaného pole
  • ng-show : Chcete-li zobrazit chybovou zprávu na základě podmínky (zkontrolujte vlastnosti ověření)
  • minimální délky : Pro zajištění minimální délky
  • ng-maxlength : Pro zajištění maximální délky
  • vzoru : Shodovat se s konkrétním vzorem
  • ng-model : Váže pole s vlastnostmi ověření, jako je $ error, $ valid atd.

S tímto se dostáváme na konec tohoto článku Validation in Angular JS. Doufám, že jste pochopili různé věci, které je třeba vzít v úvahu při ověřování formy v Angular JS.

Pokud se chcete dozvědět více o Angular framework, podívejte se na náš který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám pomůže porozumět Angular do hloubky a pomůže vám dosáhnout mistrovství v předmětu.

Máte na nás dotaz? Uveďte to prosím v sekci komentářů tohoto článku a my se vám ozveme.