Ověření formuláře AngularJS při odeslání: Příklad registrace
James Hartman
Ověření formuláře v AngularJS
Ověření formuláře v AngularJS je proces, který zajišťuje, že údaje zadané do formuláře jsou správné a úplné. Když uživatel odešle formulář, nejprve dojde k ověření před odesláním podrobností na server. Proces validace zajišťuje v nejlepší možné míře, že údaje pro vstupní pole jsou zadány správným způsobem.
V příkladu ze skutečného světa předpokládejme web, který před získáním plného přístupu k tomuto webu vyžaduje vyplnění registračního formuláře. Registrační stránka by měla vstupní pole pro uživatelské jméno, heslo, e-mailovou adresu a tak dále.
Například ID e-mailu musí být vždy ve formátu username@site.domain; pokud někdo zadá do e-mailu pouze uživatelské jméno, v ideálním případě by ověření mělo selhat. Validace se tedy zaměřuje na provedení těchto základních kontrol před odesláním podrobností na server k dalšímu zpracování.
Ověření formuláře pomocí HTML5
Ověření formuláře je proces předběžného ověření informací zadaných do webového formuláře uživatelem před jeho odesláním na server. Vždy je lepší ověřit si informace na samotné straně klienta. Je to proto, že snižuje režii, pokud by uživatel musel znovu předložit formulář, pokud byly zadané informace nesprávné.
Pojďme se podívat na to, jak lze provádět ověřování formuláře AngularJS v HTML5.
V našem příkladu ukážeme uživateli jeden jednoduchý registrační formulář, do kterého uživatel potřebuje zadat podrobnosti, jako je uživatelské jméno, heslo, e-mailové ID a věk.
Formulář bude mít ovládací prvky ověření, které zajistí, že uživatel zadá informace správným způsobem.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Vysvětlení kódu
- Pro typ zadávání textu používáme atribut 'povinné'. To znamená, že textové pole nemůže být při odeslání formuláře prázdné a v textovém poli by měl být přítomen nějaký text.
- Dalším typem vstupu je heslo. Vzhledem k tomu, že typ vstupu je označen jako heslo, když uživatel zadá do pole jakýkoli text, bude maskován.
- Protože typ vstupu je zadán jako e-mail, text v poli musí odpovídat vzoru jméno@web.doména.
- Pokud je typ vstupu označen jako číslo, pokud se uživatel pokusí zadat jakýkoli znak pomocí klávesnice nebo abecedy, nebude tento znak zadán do textového pole.
Pokud je kód úspěšně spuštěn, zobrazí se následující výstup, když spustíte svůj kód v prohlížeči pro ověření formuláře AngularJS při odeslání.
Výstup
Chcete-li vidět ověření formuláře v akci, klikněte na tlačítko Odeslat bez zadávání jakýchkoli informací na obrazovce.
Po kliknutí na tlačítko Odeslat se objeví vyskakovací okno s chybou ověření, že pole je třeba vyplnit.
Takže ověření pro ovládací prvek, který byl označen jako požadovaný, způsobí zobrazení chybové zprávy, pokud uživatel do textového pole nezadá žádnou hodnotu.
Když uživatel zadá libovolnou hodnotu do ovládacího prvku hesla, všimnete si symbolu '*' použitého k maskování zadávaných znaků.
Zadejme špatné e-mailové ID a klikneme na tlačítko Odeslat. Po kliknutí na tlačítko Odeslat se objeví vyskakovací okno s chybou ověření, že pole musí mít symbol @.
Takže ověření pro ovládací prvek, který byl označen jako ovládací prvek e-mailu, způsobí, že se zobrazí chybová zpráva, pokud uživatel do textového pole nezadá správné e-mailové ID.
Nakonec, když se pokusíte zadat jakékoli znaky do ovládacího prvku textu věku, nebudou zadány na obrazovce. Ovládací prvek se naplní hodnotou pouze tehdy, když je do ovládacího prvku zadáno číslo.
Ověření formuláře pomocí $dirty, $valid, $invalid, $pristine
AngularJS poskytuje své další vlastnosti pro ověření. AngularJS poskytuje následující vlastnosti pro ovládací prvky pro účely ověření
- $špinavé – Uživatel interagoval s ovládáním
- $platný – Obsah pole je platný
- $neplatný – Obsah pole je neplatný
- $pristine – Uživatel dosud neinteragoval s ovládáním
Níže jsou uvedeny kroky, které je třeba dodržet k provedení úhlové validace.
Krok 1) Při deklaraci formuláře použijte vlastnost no validate. Tato vlastnost říká HTML5, že ověření bude provedeno pomocí AngularJS.
Krok 2) Ujistěte se, že formulář má pro něj definovaný název. Důvodem je to, že při provádění Angular validace bude použit název formuláře.
Krok 3) Ujistěte se, že každý ovládací prvek má také definovaný název. Důvodem je to, že při provádění Angular validace bude použit název kontroly.
Krok 4) Použití ng-show direktiva pro kontrolu vlastností $dirty, $invalid a $valid pro ovládací prvky.
Podívejme se na příklad, který zahrnuje výše uvedené kroky.
V našem příkladu
Budeme mít jednoduché textové pole, do kterého uživatel musí do textového pole zadat název tématu. Pokud tak neučiníte, spustí se chyba ověření a uživateli se zobrazí chybová zpráva.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
<p>Topic Name:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Vysvětlení kódu
- Všimněte si, že jsme dali formuláři název, který je „myForm“. To je vyžadováno při přístupu k ovládacím prvkům ve formuláři pro ověření AngularJS.
- Použití vlastnosti „novalidate“ k zajištění toho, že formulář HTML umožňuje AngularJS provést ověření.
- Ke kontrole vlastností „$dirty“ a „$invalid“ používáme direktivu ng-show. To znamená, že pokud bylo textové pole změněno, pak hodnota vlastnosti „$dirty“ bude pravdivá. Také v případě, kdy je hodnota textového pole null, se vlastnost „$invalid“ stane pravdivou. Pokud jsou tedy obě vlastnosti pravdivé, ověření pro ovládací prvek selže. Pokud jsou tedy obě hodnoty pravdivé, ng-show se také stane pravdou a zobrazí se ovládací prvek rozpětí s červenými znaky.
- V tomto kontrolujeme vlastnost „$error“, která se také vyhodnotí jako true, protože jsme u ovládacího prvku uvedli, že pro ovládací prvek by měla být zadána hodnota. V takovém případě, kdy do textového pole nejsou zadána žádná data, ovládací prvek span zobrazí text „Je vyžadováno uživatelské jméno“.
- Pokud je hodnota ovládacího prvku textového pole neplatná, chceme také deaktivovat tlačítko Odeslat, aby uživatel nemohl odeslat formulář. K tomu používáme vlastnost „ng-disabled“ pro ovládací prvek na základě podmíněné hodnoty vlastnosti „$dirty“ a „$invalid“ ovládacího prvku.
- V ovladači právě nastavujeme počáteční hodnotu hodnoty textového pole na text 'AngularJS'. To se právě provádí za účelem nastavení nějaké výchozí hodnoty do textového pole při prvním zobrazení formuláře. Lépe ukazuje, jak probíhá ověření pro pole textového pole.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup
Když je formulář zpočátku zobrazen, textové pole zobrazuje hodnotu „AngularJS“ a je povoleno „tlačítko Odeslat“. Jakmile odeberete text z ovládacího prvku, aktivuje se chybová zpráva ověření a tlačítko Odeslat je deaktivováno.
Výše uvedený snímek obrazovky ukazuje dvě věci
- Tlačítko Odeslat je zakázáno
- V textovém poli Téma není žádný název tématu. Proto se zobrazí chybová zpráva „Je vyžadováno uživatelské jméno“.
Ověření formuláře pomocí AngularJS Auto Validate
V AngularJS existuje zařízení pro automatické ověření všech ovládacích prvků ve formuláři, aniž byste museli psát vlastní kód pro ověření. To lze provést zahrnutím vlastního modulu s názvem „jcs-AutoValidate“.
S tímto modulem na svém místě nemusíte umisťovat žádný speciální kód k provedení ověření nebo zobrazení chybových zpráv. To vše je řešeno kódem uvnitř JCS-AutoValidate.
Podívejme se na jednoduchý příklad, jak toho dosáhnout.
V tomto příkladu
Budeme mít jednoduchý formulář s ovládacím prvkem textového pole, což je povinné pole. Pokud tento ovládací prvek není vyplněn, mělo by se zobrazit chybové hlášení.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
Vysvětlení kódu
- Nejprve musíme zahrnout skript „jcs-auto-validate.js“, který má všechny funkce automatického ověření.
- Musíme zajistit, aby každý prvek včetně „tagu div“ byl umístěn do třídy „form-group“.
- Také je třeba zajistit, aby každý prvek (což je prvek HTML, jako je vstupní ovládací prvek, ovládací prvek rozpětí, ovládací prvek div a tak dále), jako jsou ovládací prvky vstupu, byl také umístěn do třídy form-group.
- Zahrňte jcs-autovalidate do svého modulu AngularJS JS.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup
Ve výchozím nastavení se při spuštění kódu výše uvedený formulář zobrazí jako kód HTML.
Pokud se pokusíte odeslat formulář, zobrazí se chybová zpráva „Toto pole je povinné“. To vše se provádí pomocí možnosti JCS-AutoValidate.
Zpětná vazba uživatelů pomocí tlačítek Ladda
Tlačítka „ladda“ je speciální rámec vytvořený pro tlačítka nahoře JavaScénář pro poskytnutí vizuálního efektu tlačítkům při jejich stisknutí.
Takže pokud je tlačítku přiřazen atribut „ladda“ a je stisknuto, zobrazí se efekt otáčení. Pro tlačítko jsou také k dispozici různé datové styly, které poskytují další vizuální efekty.
Podívejme se na příklad, jak vidět tlačítka „ladda“ v akci. Právě uvidíme jednoduchý formulář, který má tlačítko pro odeslání. Po stisknutí tlačítka se na tlačítku zobrazí efekt otáčení.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Vysvětlení kódu
- Používáme „ng-předložit” direktiva pro volání funkce nazvané “submit”. Tato funkce se použije ke změně atributu ladda tlačítka Odeslat.
- Atribut ladda je speciální atribut frameworku ladda. Je to tento atribut, který přidává k ovládání efekt rotace. Hodnotu atributu ladda nastavujeme na proměnnou submiting.
- Vlastnost data-style je opět doplňkový atribut nabízený frameworkem ladda, který pouze přidává jiný vizuální efekt k tlačítku pro odeslání.
- Aby rámec ladda fungoval, je třeba do aplikace AngularJS.JS přidat modul 'AngularJS-ladda'.
- Zpočátku definujeme a nastavujeme hodnotu proměnné s názvem 'submitting' na false. Tato hodnota je nastavena pro atribut ladda tlačítka Odeslat. Tím, že toto počáteční nastavení nastavíme na hodnotu false, říkáme, že nechceme, aby tlačítko Odeslat dosud mělo efekt ladda.
- Deklarujeme funkci, která se zavolá po stisknutí tlačítka Odeslat. V této funkci nastavujeme 'submitting' na true. To způsobí, že se na tlačítko Odeslat použije efekt ladda.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup
Při prvním zobrazení formuláře se tlačítko Odeslat zobrazí v jednoduché podobě.
Po stisknutí tlačítka pro odeslání se proměnná pro odeslání v ovladači nastaví na hodnotu true. Tato hodnota se předá atributu „ladda“ tlačítka pro odeslání, což způsobí roztočení tlačítka.
Shrnutí
- Ověření ovládacích prvků HTML textového pole lze provést pomocí atributu 'required'.
- V HTML5 jsou přidány nové ovládací prvky, jako je heslo, e-mail a číslo, které poskytují vlastní sadu ověření.
- Ověření formuláře v AngularJS je zajištěno pohledem na hodnoty $dirty, $valid, $invalid a $pristine ovládacího prvku formuláře.
- Automatické ověření v aplikacích AngularJS lze také dosáhnout pomocí modulu JCS-auto validate.
- Tlačítka Ladda lze přidat do aplikace Angular.js, aby uživatel po stisknutí tlačítka získal trochu lepší vizuální pocit.
