Ultimele tutoriale de dezvoltare web
 

AngularJS Validarea formularului

❮ Anterior Urmatorul capitol ❯

AngularJS poate valida datele de intrare.

Formular de validare

AngularJS ofera forma de validare client-side.

AngularJS monitorizează starea câmpurilor de formular și de intrare (input, textarea, selectați), și vă permite să notifice utilizatorul despre starea curentă.

AngularJS deține, de asemenea, informații despre dacă acestea au fost atinse, sau modificate, sau nu.

Puteți utiliza standardul HTML5 atributele pentru a valida de intrare, sau puteți face propriile funcții de validare.

validare client-side securizat de intrare de utilizator nu poate singur. validarea pe partea de server este de asemenea necesară.

Necesar

Utilizați HTML5 atributul required pentru a specifica faptul că câmpul de introducere trebuie să fie completate:

Exemplu

Este nevoie de câmpul de intrare:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Încearcă - l singur »

E-mail

Utilizați tipul de HTML5 email - email pentru a specifica faptul că valoarea trebuie să fie un e - mail:

Exemplu

Câmpul de intrare trebuie să fie un 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>
Încearcă - l singur »

Forma de stat și de stat de intrare

AngularJS se actualizează în mod constant starea atât forma, cât și câmpurile de introducere.

Câmpurile de introducere au următoarele stări:

  • $untouched Câmpul nu a fost încă atins
  • $touched Câmpul a fost atins
  • $pristine Câmpul nu a fost încă modificat
  • $dirty Câmpul a fost modificat
  • $invalid Conținutul câmp nu este valid
  • $valid Conținutul de câmp este valabil

Acestea sunt toate proprietățile câmpului de intrare, și sunt fie true sau false .

Formularele au următoarele state:

  • $pristine Rubricile au fost încă modificate
  • $dirty Una sau mai multe au fost modificate
  • $invalid Conținutul formular nu este validă
  • $valid Conținutul formular este valid
  • $submitted Formularul se depune

Acestea sunt toate proprietățile formei, și sunt fie true sau false .

Puteți utiliza aceste state pentru a afișa mesaje semnificative pentru utilizator. De exemplu, în cazul în care este necesar un câmp, iar utilizatorul lasă necompletat, ar trebui să dea utilizatorului un avertisment:

Exemplu

Afișați un mesaj de eroare în cazul în care câmpul a fost atins și este gol:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
Încearcă - l singur »

clasele CSS

AngularJS adaugă clase CSS la forme și câmpuri de intrare în funcție de stările lor.

Următoarele clase sunt adăugate sau eliminate din, câmpuri de introducere:

  • ng-untouched Câmpul nu a fost încă atins
  • ng-touched Câmpul a fost atins
  • ng-pristine Câmpul nu a fost încă modificat
  • ng-dirty Câmpul a fost modificat
  • ng-valid Conținutul de câmp este valabil
  • ng-invalid Conținutul câmp nu este valid
  • ng-valid- key O cheie pentru fiecare validare. Exemplu: ng-valid-required , utilă atunci când există mai mult de un lucru care trebuie să fie validate
  • ng-invalid- key Exemplu: ng-invalid-required

Următoarele clase sunt adăugate sau eliminate din, formulare:

  • ng-pristine Nici un câmp nu a fost încă modificat
  • ng-dirty Unul sau mai multe câmpuri a fost modificat
  • ng-valid Conținutul formular este valid
  • ng-invalid Conținutul formular nu este validă
  • ng-valid- key O cheie pentru fiecare validare. Exemplu: ng-valid-required , utilă atunci când există mai mult de un lucru care trebuie să fie validate
  • ng-invalid- key Exemplu: ng-invalid-required

Clasele sunt eliminate în cazul în care valoarea pe care o reprezintă este false .

Adăugați stiluri pentru aceste clase pentru a da cererea dumneavoastră o interfață mai bună și mai intuitivă.

Exemplu

Aplică stiluri, folosind CSS standard:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Încearcă - l singur »

Formularele pot fi, de asemenea stil:

Exemplu

Se aplică stiluri pentru nemodificate (pristine) formulare și pentru formele modificate:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
Încearcă - l singur »

Validarea personalizată

Pentru a crea propria funcție de validare este un pic mai complicat. Trebuie să adăugați o nouă directivă la cererea dumneavoastră, și să se ocupe cu validarea în interiorul unei funcții cu anumite argumente specificate.

Exemplu

Creați propria directivă, care conține o funcție de validare personalizată și se referă la ea , prin utilizarea my-directive .

Câmpul va fi valabilă numai în cazul în care valoarea conține caracterul "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>
Încearcă - l singur »

Exemplu explicat:

In HTML, noua directivă va fi menționată utilizând atributul my-directive .

În JavaScript vom începe prin adăugarea unei noi directive numit myDirective .

Amintiți - vă, atunci când numirea unei directive, trebuie să utilizați un nume de caz cămilă, myDirective , dar atunci când acesta invocă, trebuie să utilizați - numele separat, my-directive .

Apoi, întoarce un obiect în cazul în care specificați că avem nevoie de ngModel , care este ngModelController.

Asigurați - o funcție de legătură care are unele argumente, în cazul în care al patrulea argument, mCtrl , este ngModelController ,

Apoi , specificați o funcție, în acest caz numit myValidation , care ia un argument, acest argument este valoarea elementului de intrare.

Testați dacă valoarea conține litera "e" , și a stabilit validitatea controlerului modelului fie true sau false .

În cele din urmă, mCtrl.$parsers. push(myValidation) ; mCtrl.$parsers. push(myValidation) ; se va adăuga myValidation funcția de la o serie de alte funcții, care vor fi executate de fiecare dată când se modifică valoarea de intrare.

Exemplu de validare

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Încearcă - l singur »

HTML forma atribut novalidate este utilizat pentru a dezactiva validarea browser - ul implicit.

exemplu explicat

AngularJS Directiva ng-modelul leaga elementele de intrare ale modelului.

Obiectul model are două proprietăți: utilizator și e - mail.

Din cauza ng-spectacol, cu deschiderile de culoare: roșu sunt afișate numai atunci când utilizatorul sau e - mail este de $ murdar și $ invalidă.


❮ Anterior Urmatorul capitol ❯