English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
AngularJS puede validar los datos de entrada de formularios y controles.
En los capítulos anteriores, ya has aprendido sobre AngularJS formularios y controles.
AngularJS ofrece funciones de validación para formularios y controles, y puede alertar a los datos de entrada ilegales.
La validación del cliente no puede garantizar la seguridad de los datos de entrada del usuario, por lo que también es necesario la validación de datos en el servidor.
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<h2>Ejemplo de validación</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Nombre de usuario:<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">El nombre de usuario es obligatorio.</span>
</span>
</p>
<p>Correo electrónico:<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">El correo electrónico es obligatorio.</span>
<span ng-show="myForm.email.$error.email">Dirección de correo electrónico no válida.</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>Ver la prueba ‹/›La propiedad HTML del formulario novalidate se utiliza para deshabilitar la validación predeterminada del navegador.
AngularJS ng-model La directiva se utiliza para enlazar elementos de entrada al modelo.
El objeto del modelo tiene dos propiedades: user Y email.
Usamos ng-showDirectiva, color:red en el correo electrónico $dirty O $invalid Se muestra solo cuando todos son true.
| Atributo | Descripción |
|---|---|
| $dirty | Hay registros de llenado de formulario |
| $valid | El contenido del campo es válido |
| $invalid | El contenido del campo es ilegal |
| $pristine | No hay registros de llenado de formulario |