Ověření formuláře AngularJS
AngularJS dokáže ověřit vstupní data.
Ověření formuláře
AngularJS nabízí ověřování formulářů na straně klienta.
AngularJS monitoruje stav formuláře a vstupních polí (vstup, textová oblast, výběr) a umožňuje uživateli informovat o aktuálním stavu.
AngularJS také uchovává informace o tom, zda se jich někdo dotkl nebo je upravil nebo ne.
K ověření vstupu můžete použít standardní atributy HTML5 nebo si můžete vytvořit vlastní ověřovací funkce.
Ověření na straně klienta nemůže samo zabezpečit vstup uživatele. Ověření na straně serveru je také nutné.
Požadované
Pomocí atributu HTML5 requiredzadejte, že vstupní pole musí být vyplněno:
Příklad
Vstupní pole je povinné:
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
E-mailem
Pomocí typu HTML5 zadejte email, že hodnota musí být e-mail:
Příklad
Vstupní pole musí být e-mail:
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Stav formuláře a stav vstupu
AngularJS neustále aktualizuje stav formuláře i vstupních polí.
Vstupní pole mají následující stavy:
$untouchedNa pole se zatím nikdo nesáhl$touchedPole bylo zasaženo$pristinePole dosud nebylo upraveno$dirtyPole bylo upraveno$invalidObsah pole není platný$validObsah pole je platný
Všechny jsou vlastnostmi vstupního pole a jsou buď true
nebo false.
Formuláře mají následující stavy:
$pristineDosud nebyla upravena žádná pole$dirtyJeden nebo více bylo upraveno$invalidObsah formuláře není platný$validObsah formuláře je platný$submittedFormulář je odeslán
Všechny jsou vlastnostmi formuláře a jsou buď true
nebo false.
Tyto stavy můžete použít k zobrazení smysluplných zpráv uživateli. Pokud je například pole vyžadováno a uživatel jej nechá prázdné, měli byste uživateli dát varování:
Příklad
Zobrazit chybovou zprávu, pokud jste se dotkli pole A je prázdné:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>
Třídy CSS
AngularJS přidává třídy CSS do formulářů a vstupních polí v závislosti na jejich stavech.
Následující třídy se přidávají do vstupních polí nebo se z nich odebírají:
ng-untouchedNa pole se zatím nikdo nesáhlng-touchedPole bylo zasaženong-pristinePole dosud nebylo upravenong-dirtyPole bylo upravenong-validObsah pole je platnýng-invalidObsah pole není platnýng-valid-keyJeden klíč pro každé ověření. Příklad:ng-valid-required, užitečné, když existuje více než jedna věc, která musí být ověřenang-invalid-keyPříklad:ng-invalid-required
Následující třídy se přidávají do formulářů nebo se z nich odebírají:
ng-pristineŽádná pole dosud nebyla upravenang-dirtyJedno nebo více polí bylo změněnong-validObsah formuláře je platnýng-invalidObsah formuláře není platnýng-valid-keyJeden klíč pro každé ověření. Příklad:ng-valid-required, užitečné, když existuje více než jedna věc, která musí být ověřenang-invalid-keyPříklad:ng-invalid-required
Třídy jsou odstraněny, pokud je hodnota, kterou představují, false.
Přidejte styly pro tyto třídy, abyste své aplikaci poskytli lepší a intuitivnější uživatelské rozhraní.
Příklad
Použijte styly pomocí standardních CSS:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Formuláře lze také stylovat:
Příklad
Použít styly pro neupravené (nedotčené) formuláře a pro upravené formuláře:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Vlastní ověření
Vytvoření vlastní ověřovací funkce je o něco složitější; Musíte do své aplikace přidat novou direktivu a vypořádat se s validací uvnitř funkce s určitými specifikovanými argumenty.
Příklad
Vytvořte si vlastní direktivu obsahující vlastní ověřovací funkci a odkazujte na ni pomocí my-directive.
Pole bude platné pouze v případě, že hodnota obsahuje znak "e":
<form name="myForm">
<input name="myInput" ng-model="myInput" required
my-directive>
</form>
<script>
var app = angular.module('myApp',
[]);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element,
attr, mCtrl) {
function myValidation(value)
{
if (value.indexOf("e") > -1)
{
mCtrl.$setValidity('charE',
true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
Vysvětlený příklad:
V HTML se na novou direktivu bude odkazovat pomocí atributu
my-directive.
V JavaScriptu začneme přidáním nové direktivy s názvem myDirective.
Pamatujte, že při pojmenování direktivy musíte použít název případu velblouda
myDirective, ale při jeho vyvolání musíte použít -samostatný název,
my-directive.
Poté vraťte objekt, kde zadáte, že požadujeme ngModel, což je ngModelController.
Vytvořte spojovací funkci, která přebírá nějaké argumenty, kde čtvrtý argument, mCtrl, je ngModelController,
Poté zadejte funkci, v tomto případě s názvem myValidation, která přebírá jeden argument, tento argument je hodnota vstupního prvku.
Otestujte, zda hodnota obsahuje písmeno „e“, a nastavte platnost modelového ovladače na buď truenebo false.
Nakonec mCtrl.$parsers.push(myValidation);přidá
myValidationfunkci do pole dalších funkcí, které se provedou pokaždé, když se změní vstupní hodnota.
Příklad ověření
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<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>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span
style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',
function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
Atribut formuláře HTML novalidate se používá k zakázání ověřování výchozího prohlížeče.
Příklad vysvětlen
Direktiva AngularJS ng-model spojuje vstupní prvky s modelem.
Objekt modelu má dvě vlastnosti: user a email .
Kvůli ng-show se rozsahy s color:red zobrazí pouze v případě, že uživatel nebo e-mail je $dirty a $invalid .