Verifica del modulo AngularJS

AngularJS è in grado di verificare i dati di input.

Verifica del modulo

AngularJS offre la verifica del modulo client-side.

AngularJS monitora lo stato dei moduli e dei campi di input (input, textarea, select) e ti permette di notificare all'utente lo stato corrente.

AngularJS include informazioni su se sono stati toccati o modificati.

Puoi utilizzare gli attributi HTML5 standard per verificare l'inserimento, o creare la tua funzione di verifica personalizzata.

La verifica client-side non può proteggere in modo autonomo l'inserimento dell'utente. La verifica server-side è anche necessaria.

obbligatorio

Utilizzo dell'attributo HTML5 obbligatorio Il campo specificato deve essere compilato:

istanza

Questo campo di input è obbligatorio:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>Lo stato di validità dell'input è:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Prova tu stesso

email

Utilizzo del tipo HTML5 email Il valore specificato deve essere un indirizzo email:

istanza

Questo campo di input deve essere un indirizzo email:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>Lo stato di validità dell'input è:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Prova tu stesso

Stato del modulo e stato dell'input

AngularJS aggiorna continuamente lo stato dei moduli e dei campi di input.

I campi di input hanno i seguenti stati:

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

Sono tutte proprietà dei campi di input, possono essere vere o false.

Il modulo ha i seguenti stati:

  • $pristine Non è stato modificato alcun campo
  • $dirty Un campo o più campi sono stati modificati
  • $invalid Il contenuto del modulo è non valido
  • $valid Il contenuto del modulo è valido
  • $subscribed Il modulo è stato inviato

Sono tutte proprietà del modulo, possono essere vere o false.

Puoi utilizzare questi stati per mostrare messaggi significativi agli utenti. Ad esempio, se un campo è obbligatorio e l'utente lo lascia vuoto, dovresti avvisare l'utente:

istanza

Se il campo è stato toccato e è vuoto, mostra un messaggio di errore:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">Il nome è obbligatorio.</span>

Prova tu stesso

Classi CSS

AngularJS aggiunge classi CSS ai moduli e ai campi di input in base allo stato di questi.

Le seguenti classi sono state aggiunte ai campi di input o rimosse dai campi di input:

  • ng-untouched Questo campo non è stato toccato
  • ng-touched Questo campo è stato toccato
  • ng-pristine Questo campo non è stato modificato
  • ng-dirty Questo campo è stato modificato
  • ng-valid Il contenuto del campo è valido
  • ng-invalid Il contenuto del campo è non valido
  • ng-valid-key Valida una chiave alla volta. Ad esempio:ng-valid-requiredè molto utile quando ci sono più contenuti da validare.
  • ng-invalid-key Ad esempio:ng-invalid-required

Le seguenti classi sono state aggiunte al modulo o rimosse dal modulo:

  • ng-pristine Non ci sono campi che non sono stati modificati
  • ng-dirty Un campo o più campi sono stati modificati
  • ng-valid Il contenuto del modulo è valido
  • ng-invalid Il contenuto del modulo è non valido
  • ng-valid-key Valida una chiave alla volta. Ad esempio:ng-valid-requiredè molto utile quando ci sono più contenuti da validare.
  • ng-invalid-key Ad esempio:ng-invalid-required

se il valore rappresentato dalla classe è falsese queste classi rappresentano un valore

Aggiungi stili a queste classi per fornire una interfaccia utente migliore e più intuitiva alla tua applicazione.

istanza

Applica lo stile CSS standard:

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

Prova tu stesso

Puoi anche impostare lo stile del modulo.

istanza

Applica lo stile per il modulo non modificato (originale) e per il modulo modificato:

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

Prova tu stesso

Validazione Personalizzata

Creare una funzione di validazione personalizzata richiede alcune abilità; devi aggiungere un nuovo directive all'applicazione e utilizzare alcuni parametri specifici per gestire la validazione all'interno della funzione.

istanza

Crea la tua propria directive, contenente una funzione di validazione personalizzata, e utilizza my-directive riferisciti a esso.

Il campo è valido 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 directive verrà utilizzata tramite l'uso dell'attributo my-directive per riferirsi a.

In JavaScript, prima aggiungiamo un nome myDirective nuovo directive.

Ricorda, quando nomini un directive, devi usare la notazione camelCase, come myDirectivema quando lo chiami, devi usare il nome separato da trattini, come my-directive.

Poi, restituisce un oggetto che specifica ciò che ci serve ngModelcioè ngModelController.

crea una funzione di collegamento che accetta alcuni parametri, tra cui il quarto parametro mCtrl è ngModelController.

Poi specifica una funzione, nel nostro esempio chiamata myValidationaccetta un parametro, che è il valore dell'elemento di input.

Testa se il valore contiene la lettera "e" e imposta la validità del controllore del modello a true o false.

Infine,mCtrl.$parsers.push(myValidation); aggiungerà myValidation La funzione aggiunge altre funzioni all'array di funzioni, che verranno eseguite ogni volta che il valore viene modificato.

Validation Example

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

Prova tu stesso

Proprietà del modulo HTML novalidate Usato per disabilitare la validazione predefinita del browser.

Esempio di spiegazione:

Direttive AngularJS ng-model Legare l'elemento di input al modello.

L'oggetto modello ha due proprietà:user e email.

per ng-showsolo quando user o email è $dirty e $invalid Verranno visualizzati i spans con color:red