AngularJS formularvalidering

AngularJS kan validere inputdata.

Formularvalidering

AngularJS tilbyder klientformularvalidering.

AngularJS overvåger tilstande for formulær og inputfelter (input, textarea, select) og giver dig mulighed for at informere brugeren om den aktuelle tilstand.

AngularJS indeholder også information om, om de er blevet rørt eller ændret.

Du kan bruge standard HTML5-attributter til at validere input, eller oprette dine egne valideringsfunktioner.

Klientvaliditet kan ikke alene beskytte brugerinput. Servervaliditet er også nødvendig.

required

Brug HTML5-attributter required Angivet felt skal udfyldes:

eksempler

Dette inputfelt er obligatorisk:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>Inputfeltets gyldige tilstand er:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Prøv det selv

email

Brug HTML5-type email Angivet værdi skal være en e-mail:

eksempler

Dette inputfeltet skal være en e-mail:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>Inputfeltets gyldige tilstand er:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Prøv det selv

Formularstatus og inputstatus

AngularJS opdaterer løbende formularen og inputfeltets tilstand.

Inputfeltet har følgende tilstande:

  • $untouched Dette felt er ikke blevet rørt ved
  • $touched Dette felt er blevet rørt ved
  • $pristine Dette felt er ikke blevet ændret
  • $dirty Dette felt er blevet ændret
  • $invalid Feltindhold er ugyldigt
  • $valid Feltindhold er gyldigt

De er alle egenskaber for inputfeltet, enten sand eller falsk.

Formularen har følgende tilstande:

  • $pristine Ingen felter er blevet ændret
  • $dirty En eller flere felter er blevet ændret
  • $invalid Formulardata er ugyldig
  • $valid Formulardata er gyldig
  • $subscribed Formularen er blevet indsendt

De er alle egenskaber for formularen, og kan være sand eller falsk.

Du kan bruge disse tilstande til at vise meningsfulde beskeder til brugeren. For eksempel, hvis et felt er påkrævet og brugeren efterlader det tomt, bør brugeren blive advaret:

eksempler

Vis en fejlmeddelelse, hvis feltet allerede er rørt ved og er tomt:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">Navnet er påkrævet.</span>

Prøv det selv

CSS-klasser

AngularJS tilføjer CSS-klasser til formularen og inputfeltet baseret på deres tilstand.

Følgende klasser er blevet tilføjet til eller fjernet fra inputfeltet:

  • ng-untouched Dette felt er ikke blevet rørt ved
  • ng-touched Dette felt er blevet rørt ved
  • ng-pristine Dette felt er ikke blevet ændret
  • ng-dirty Dette felt er blevet ændret
  • ng-valid Feltindhold er gyldigt
  • ng-invalid Feltindhold er ugyldigt
  • ng-valid-key Valider en nøgle hver gang. Eksempel:ng-valid-requireder meget nyttig, når der er flere nødvendige valideringer
  • ng-invalid-key Eksempel:ng-invalid-required

Følgende klasser er blevet tilføjet til eller fjernet fra formularen:

  • ng-pristine Ingen felter er blevet ændret
  • ng-dirty En eller flere felter er blevet ændret
  • ng-valid Formulardata er gyldig
  • ng-invalid Formulardata er ugyldig
  • ng-valid-key Valider en nøgle hver gang. Eksempel:ng-valid-requireder meget nyttig, når der er flere nødvendige valideringer
  • ng-invalid-key Eksempel:ng-invalid-required

Hvis værdien repræsenteret af klassen er falseså vil disse klasser blive fjernet.

Tilføj stil til disse klasser for at give din applikation en bedre og mere intuitiv brugergrænseflade.

eksempler

Anvend standard CSS til at anvende stil:

<style>
input.ng-invalid {
  baggrundsfarve: pink;
};
input.ng-valid {
  background-color: lightgreen;
};
</style>

Prøv det selv

Man kan også indstille formularens stil.

eksempler

Anvender stil på både uændrede (originale) og ændrede formulær:

<style>
form.ng-pristine {
  baggrundsfarve: lyseblå;
};
form.ng-dirty {
  baggrundsfarve: pink;
};
</style>

Prøv det selv

brugerdefineret validering

at oprette en brugerdefineret valideringsfunktion kræver nogle færdigheder; du skal tilføje en ny instruks til applikationen og bruge visse specifikke parametre til at håndtere valideringen inde i funktionen.

eksempler

opret din egen instruks, der indeholder en brugerdefineret valideringsfunktion, og brug my-directive referere til det.

feltet er gyldigt kun, når værdien indeholder tegnet "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 {
    kræver: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        hvis (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } ellers {
          mCtrl.$setValidity('charE', false);
        };
        return value;
      };
      mCtrl.$parsers.push(myValidation);
    };
  };
});
</script>

Prøv det selv

Eksempel Forklaret:

I HTML vil den nye instruks tilføjes ved hjælp af attributten my-directive for at referere til.

I JavaScript tilføjer vi først en variabel kaldet myDirective ny instruks.

husk, når du navngiver en instruks, skal du bruge pelskiftning, som myDirectivemen når du kalder det, skal du bruge et flertalsnavn adskilt af bindestreger, som my-directive.

derefter returnér et objekt, hvor vi specificerer, at vi ønsker ngModeler ngModelController.

opret en linkfunktion, der accepterer nogle parametre, hvor den fjerde parameter mCtrl er ngModelController.

derefter specificer en funktion, i dette eksempel kaldet myValidationdet accepterer en parameter, som er værdien af inputelementet.

test om værdien indeholder bogstaven "e" og sæt modelkontrollers gyldighed til true eller false.

sidst,mCtrl.$parsers.push(myValidation); vil myValidation Funktioner tilføjes til andre funktioners array, som vil blive udført hver gang værdien ændres.

验证示例

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>验证示例</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名：<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">用户名是必填项。<
  </span>
</p>
<p>电子邮件：<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">电子邮件是必填项。</span>
  <span ng-show="myForm.email.$error.email">无效的电子邮件地址。</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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

Prøv det selv

HTML formulær egenskab novalidate Bruges til at deaktivere standardbrowservalidering.

Eksempel på forklaring:

AngularJS instruktioner ng-model Bind inputelementet til modellen.

Modellobjekter har to egenskaber:user og email.

på grund af ng-showkun når user eller email er $dirty og $invalid viser spans med color:red.