Los últimos tutoriales de desarrollo web
 

AngularJS Validación de formularios

❮ Anterior Siguiente Capítulo ❯

AngularJS pueden validar los datos de entrada.

Validación de formularios

AngularJS ofrece validación del lado del cliente.

AngularJS supervisa el estado de los campos del formulario y de entrada (input, textarea, select), y le permite notificar al usuario sobre el estado actual.

AngularJS también tiene información sobre si se han tocado, o modificado, o no.

Se puede utilizar estándar HTML5 atribuye a validar la entrada, o usted puede hacer sus propias funciones de validación.

Nota validación del lado del cliente no puede por sí sola entrada de usuario segura. validación del lado del servidor también es necesario.

Necesario

Utilice el atributo HTML5 required para especificar que el campo de entrada debe ser llenado:

Ejemplo

Se requiere que el campo de entrada:

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

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Inténtalo tú mismo "

Email

Utilice el tipo de HTML5 email para especificar que el valor debe ser un e-mail:

Ejemplo

El campo de entrada tiene que ser 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>
Inténtalo tú mismo "

Estado forma y el Estado de entrada

AngularJS está en constante actualización del estado de la forma y los campos de entrada.

Los campos de entrada tienen los siguientes estados:

  • $untouched El campo no se ha tocado todavía
  • $touched El campo ha sido tocado
  • $pristine El campo no se ha modificado todavía
  • $dirty El campo ha sido modificado
  • $invalid El contenido del campo no es válido
  • $valid El contenido del campo es válida

Son todas las propiedades del campo de entrada, y son ya sea true o false .

Formas tienen los siguientes estados:

  • $pristine No hay campos han sido modificados sin embargo,
  • $dirty Uno o más han sido modificados
  • $invalid El contenido del formulario no es válido
  • $valid El contenido del formulario es válido
  • $submitted el formulario es enviado

Son todas las propiedades de la forma, y son ya sea true o false .

Puede utilizar estos estados para mostrar mensajes significativos para el usuario. Por ejemplo, si se requiere un campo, y el usuario deja en blanco, se debe dar al usuario una advertencia:

Ejemplo

Mostrar un mensaje de error si el campo ha sido tocado y está más vacío:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
Inténtalo tú mismo "

Las clases CSS

AngularJS añade clases CSS a las formas y campos de entrada en función de sus estados.

Las siguientes clases se añaden a, o se quitan de, campos de entrada:

  • ng-untouched El campo no se ha tocado todavía
  • ng-touched El campo ha sido tocado
  • ng-pristine El campo no se ha modificado todavía
  • ng-dirty El campo ha sido modificado
  • ng-valid El contenido del campo es válida
  • ng-invalid El contenido del campo no es válida
  • ng-valid- key Una de las claves para cada validación. Ejemplo: ng-valid-required , útil cuando hay más de una cosa que debe ser validada
  • ng-invalid- key Ejemplo: ng-invalid-required

Las siguientes clases son añadidos a, o removidos de, formas:

  • ng-pristine No hay campos no ha sido modificado aún
  • ng-dirty Uno o más campos han sido modificados
  • ng-valid el contenido del formulario es válido
  • ng-invalid El contenido del formulario no es válida
  • ng-valid- key Una de las claves para cada validación. Ejemplo: ng-valid-required , útil cuando hay más de una cosa que debe ser validada
  • ng-invalid- key Ejemplo: ng-invalid-required

Las clases se eliminan si el valor que representan es false .

Añadir estilos de estas clases para dar a su solicitud una interfaz de usuario mejor y más intuitiva.

Ejemplo

Aplicar estilos, el uso de CSS estándar:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Inténtalo tú mismo "

Los formularios también pueden ser de estilo:

Ejemplo

Aplicar estilos de formas sin modificar (vírgenes), y para las formas modificadas:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
Inténtalo tú mismo "

validación personalizada

Para crear su propia función de validación es un poco más complejo. Usted tiene que agregar una nueva directiva para su aplicación, y hacer frente a la validación dentro de una función con ciertos argumentos especificados.

Ejemplo

Crear su propia directiva, que contiene una función de validación personalizada, y se refieren a ella mediante el uso de my-directive .

El campo sólo será válido si el valor contiene el carácter "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>
Inténtalo tú mismo "

Ejemplo Explicación:

En HTML, la nueva directiva se refiere mediante el atributo my-directive .

En el JavaScript empezamos mediante la adición de una nueva directiva nombrada myDirective .

Recuerde, al nombrar una directiva, debe utilizar un nombre de camello caso, myDirective , pero cuando la invoca, debe utilizar - nombre separado, my-directive .

A continuación, devolver un objeto que se especifica que se requiere ngModel , que es el ngModelController.

Hacer una función de enlace que tiene algunos argumentos, donde el cuarto argumento, mCtrl , es la ngModelController ,

A continuación, especifique una función, en este caso llamado myValidation , que toma un argumento, este argumento es el valor del elemento de entrada.

Comprueba si el valor contiene la letra "e", y establecer la validez del controlador de modelo para ya sea true o false .

Por fin, mCtrl.$parsers.push(myValidation); Agregará el myValidation función de una serie de otras funciones, que se ejecuta cada vez que cambia el valor de entrada.

Ejemplo de validación

<!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>
Inténtalo tú mismo "
Nota El novalidate representación de atributo HTML se utiliza para desactivar la validación navegador por defecto.

ejemplo Explicación

La directiva AngularJS ng-modelo se une a los elementos de entrada para el modelo.

El objeto modelo tiene dos propiedades: de usuario y correo electrónico.

Debido ng-show, los tramos con color: rojo sólo se muestran cuando el usuario o correo electrónico es sucio y $ $ válido.


❮ Anterior Siguiente Capítulo ❯