AngularJS Vorm Validasie
AngularJS kan invoerdata valideer.
Vorm validering
AngularJS bied kliënt-kant vorm validering.
AngularJS monitor die toestand van die vorm en invoervelde (invoer, teksarea, kies), en laat jou die gebruiker in kennis stel van die huidige toestand.
AngularJS hou ook inligting oor of hulle aangeraak is, of gewysig is of nie.
Jy kan standaard HTML5-kenmerke gebruik om invoer te valideer, of jy kan jou eie valideringsfunksies maak.
Kliëntkant-validering kan nie alleen gebruikersinvoer beveilig nie. Bedienerkant-validering is ook nodig.
Vereis
Gebruik die HTML5-kenmerk requiredom te spesifiseer dat die invoerveld ingevul moet word:
Voorbeeld
Die invoerveld word vereis:
<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-pos
Gebruik die HTML5-tipe emailom te spesifiseer dat die waarde 'n e-pos moet wees:
Voorbeeld
Die invoerveld moet 'n e-pos wees:
<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>
Vorm Staat en Invoer Staat
AngularJS is voortdurend besig om die toestand van beide die vorm en die invoervelde op te dateer.
Invoervelde het die volgende toestande:
$untouchedDie veld is nog nie aangeraak nie$touchedDie veld is aangeraak$pristineDie veld is nog nie gewysig nie$dirtyDie veld is gewysig$invalidDie veldinhoud is nie geldig nie$validDie veldinhoud is geldig
Hulle is almal eienskappe van die invoerveld, en is óf true
óf false.
Vorms het die volgende toestande:
$pristineGeen velde is nog gewysig nie$dirtyEen of meer is gewysig$invalidDie vorminhoud is nie geldig nie$validDie vorminhoud is geldig$submittedDie vorm word ingedien
Hulle is almal eienskappe van die vorm, en is óf true
óf false.
Jy kan hierdie state gebruik om betekenisvolle boodskappe aan die gebruiker te wys. Byvoorbeeld, as 'n veld vereis word, en die gebruiker laat dit leeg, moet jy die gebruiker 'n waarskuwing gee:
Voorbeeld
Wys 'n foutboodskap as die veld aangeraak is EN leeg is:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>
CSS Klasse
AngularJS voeg CSS-klasse by vorms en invoervelde, afhangende van hul toestande.
Die volgende klasse word by, of verwyder uit, invoervelde:
ng-untouchedDie veld is nog nie aangeraak nieng-touchedDie veld is aangeraakng-pristineDie veld is nog nie gewysig nieng-dirtyDie veld is gewysigng-validDie veldinhoud is geldigng-invalidDie veldinhoud is nie geldig nieng-valid-keyEen sleutel vir elke validering. Voorbeeld:ng-valid-required, nuttig wanneer daar meer as een ding is wat bekragtig moet wordng-invalid-keyVoorbeeld:ng-invalid-required
Die volgende klasse word by, of verwyder van, vorms:
ng-pristineGeen velde is nog nie gewysig nieng-dirtyEen of meer velde is gewysigng-validDie vorminhoud is geldigng-invalidDie vorminhoud is nie geldig nieng-valid-keyEen sleutel vir elke validering. Voorbeeld:ng-valid-required, nuttig wanneer daar meer as een ding is wat bekragtig moet wordng-invalid-keyVoorbeeld:ng-invalid-required
Die klasse word verwyder as die waarde wat hulle verteenwoordig is false.
Voeg style by vir hierdie klasse om jou toepassing 'n beter en meer intuïtiewe gebruikerskoppelvlak te gee.
Voorbeeld
Pas style toe met standaard CSS:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Vorms kan ook gestileer word:
Voorbeeld
Pas style toe vir onveranderde (ongerepte) vorms, en vir gewysigde vorms:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Pasgemaakte validering
Dit is 'n bietjie moeiliker om jou eie valideringsfunksie te skep; Jy moet 'n nuwe opdrag by jou toepassing voeg, en die validering binne 'n funksie met sekere gespesifiseerde argumente hanteer.
Voorbeeld
Skep jou eie instruksie, wat 'n pasgemaakte valideringsfunksie bevat, en verwys daarna deur my-directive.
Die veld sal slegs geldig wees as die waarde die karakter "e" bevat:
<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>
Voorbeeld verduidelik:
In HTML sal daar na die nuwe richtlijn verwys word deur die kenmerk
my-directive.
In die JavaScript begin ons deur 'n nuwe opdrag genaamd myDirective.
Onthou, wanneer jy 'n opdrag benoem, moet jy 'n kameelkasnaam gebruik
myDirective, maar wanneer jy dit aanroep, moet jy -geskeide naam gebruik,
my-directive.
Stuur dan 'n voorwerp terug waar jy spesifiseer dat ons benodig ngModel, wat die ngModelController is.
Maak 'n skakelfunksie wat sommige argumente neem, waar die vierde argument, mCtrl, die ngModelController, is
Spesifiseer dan 'n funksie, in hierdie geval genaamd myValidation, wat een argument neem, hierdie argument is die waarde van die invoerelement.
Toets of die waarde die letter "e" bevat, en stel die geldigheid van die modelbeheerder op óf trueof false.
Uiteindelik, mCtrl.$parsers.push(myValidation);sal die
myValidationfunksie by 'n verskeidenheid ander funksies voeg, wat uitgevoer sal word elke keer as die invoerwaarde verander.
Validasie voorbeeld
<!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>
Die HTML-vorm-kenmerk novalidate word gebruik om verstekblaaiervalidering te deaktiveer.
Voorbeeld Verduidelik
Die AngularJS-direktief ng-model bind die insetelemente aan die model.
Die modelvoorwerp het twee eienskappe: gebruiker en e -pos .
As gevolg van ng-show , word die streke met kleur:rooi slegs vertoon wanneer gebruiker of e -pos $vuil en $ongeldig is .