Gli ultimi tutorial di sviluppo web
 

AngularJS validazione dei form

❮ Precedente Successivo Capitolo ❯

AngularJS possono convalidare i dati di input.

validazione dei form

AngularJS offre validazione dei form lato client.

AngularJS controlla lo stato dei campi del modulo e di ingresso (input, textarea, selezionare), e consente di notificare l'utente circa lo stato attuale.

AngularJS detiene anche informazioni riguardo se sono stati toccati, o modificati, o no.

È possibile utilizzare standard HTML5 attributi per convalidare l'input, oppure si può fare il vostro proprio funzioni di validazione.

Nota la validazione lato client non può da solo l'input dell'utente sicuro. validazione lato server è anche necessario.

richiesto

Utilizzare l'attributo HTML5 required per specificare che il campo di input deve essere compilato:

Esempio

È necessario il campo di inserimento:

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

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Prova tu stesso "

E-mail

Utilizzare il tipo di HTML5 email per specificare che il valore deve essere una e-mail:

Esempio

Il campo di input deve essere una 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>
Prova tu stesso "

Modulo di Stato e Stato di ingresso

AngularJS è in costante aggiornamento dello stato sia della forma e dei campi di input.

I campi di input sono i seguenti stati:

  • $untouched Il campo non è stato ancora toccato
  • $touched Il campo è stato toccato
  • $pristine Il campo non è stato ancora modificato
  • $dirty Il campo è stato modificato
  • $invalid Il contenuto del campo non è valido
  • $valid Il contenuto del campo è valido

Sono tutte le proprietà del campo di input, e sono o true o false .

Forme hanno i seguenti stati:

  • $pristine Nessun campo sono ancora stati modificati
  • $dirty Uno o più sono stati modificati
  • $invalid Il contenuto del modulo non è valido
  • $valid Il contenuto modulo è valido
  • $submitted il modulo viene inviato

Sono tutte le proprietà della forma, e sono o true o false .

È possibile utilizzare questi stati per mostrare messaggi significativi per l'utente. Esempio, se un campo è obbligatorio, e l'utente lascia vuoto, si dovrebbe dare all'utente un avvertimento:

Esempio

Mostra un messaggio di errore se il campo è stato toccato e è vuota:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
Prova tu stesso "

Le classi CSS

AngularJS aggiunge classi CSS a forme e campi di input a seconda della loro stati.

Le seguenti classi sono aggiunti, o rimossi da, campi di input:

  • ng-untouched Il campo non è stato ancora toccato
  • ng-touched Il campo è stato toccato
  • ng-pristine Il campo non è stato ancora modificato
  • ng-dirty Il campo è stato modificato
  • ng-valid Il contenuto del campo è valido
  • ng-invalid Il contenuto campo non è valida
  • ng-valid- key Una chiave per ogni convalida. Esempio: ng-valid-required , utile quando ci sono più di una cosa che deve essere convalidato
  • ng-invalid- key Esempio: ng-invalid-required

Le seguenti classi vengono aggiunti o rimossi da, forme:

  • ng-pristine Nessun campo non è stato ancora modificato
  • ng-dirty Uno o più campi è stato modificato
  • ng-valid Il contenuto modulo è valido
  • ng-invalid Il contenuto modulo non è valida
  • ng-valid- key Una chiave per ogni convalida. Esempio: ng-valid-required , utile quando ci sono più di una cosa che deve essere convalidato
  • ng-invalid- key Esempio: ng-invalid-required

Le classi vengono rimossi se il valore che essi rappresentano è false .

Aggiungere stili per queste classi per dare l'applicazione di una interfaccia utente migliore e più intuitiva.

Esempio

Applicare stili, utilizzando standard di CSS:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Prova tu stesso "

I moduli possono anche essere in stile:

Esempio

Applicare stili per le forme non modificati (incontaminate), e per le forme modificate:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
Prova tu stesso "

convalida personalizzato

Per creare la propria funzione di validazione è un po 'più complicato. È necessario aggiungere una nuova direttiva per l'applicazione, e trattare con la convalida all'interno di una funzione con determinati argomenti specificati.

Esempio

Crea il tuo direttiva, che contiene una funzione di validazione personalizzata, e si riferiscono ad esso utilizzando my-directive .

Il campo sarà valida solo se il valore contiene il carattere "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>
Prova tu stesso "

Esempio spiegato:

In HTML, la nuova direttiva sarà denominato utilizzando l'attributo my-directive .

In JavaScript si parte con l'aggiunta di una nuova direttiva di nome myDirective .

Ricordate, quando la denominazione di una direttiva, è necessario utilizzare un nome caso cammello, myDirective , ma quando si richiama, è necessario usare - nome separato, my-directive .

Poi, restituire un oggetto in cui si specifica che abbiamo bisogno ngModel , che è il ngModelController.

Fare una funzione di collegamento che prende alcuni argomenti, dove il quarto argomento, mCtrl , è il ngModelController ,

Poi specificare una funzione, in questo caso chiamato myValidation , che accetta un argomento, questo argomento è il valore dell'elemento di input.

Testare se il valore contiene la lettera "e", e impostare la validità del regolatore modello sia true o false .

Alla fine, mCtrl.$parsers.push(myValidation); Aggiungerà la myValidation funzione di una serie di altre funzioni, che verrà eseguito ogni volta che il valore cambia in ingresso.

convalida Esempio

<!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>
Prova tu stesso "
Nota L'attributo modulo novalidate HTML viene utilizzato per disattivare la convalida browser predefinito.

esempio spiegato

Il ng-modello di direttiva AngularJS lega gli elementi di input per il modello.

L'oggetto modello ha due proprietà: facilità d'uso ed e-mail.

A causa della ng-spettacolo, le campate con colore: rosso vengono visualizzati solo quando l'utente o e-mail è di $ sporco e $ valido.


❮ Precedente Successivo Capitolo ❯