AngularJS Validación de entrada
Los formularios y controles de AngularJS pueden validar los datos de entrada.
Validación de entrada
En los capítulos anteriores, ya has aprendido sobre los formularios y controles de AngularJS.
Los formularios y controles de AngularJS pueden proporcionar funciones de validación y advertir sobre datos ilegales ingresados por el usuario.
 |
La validación del lado del cliente no puede garantizar la seguridad de los datos ingresados por el usuario, por lo que la validación de datos del lado del servidor también es necesaria. |
|---|
Código de la aplicación
<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<h2>Validation Example</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">Correo electrónico no válido.</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>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<h2>Validation Example</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">Correo electrónico no válido.</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>
Pruébalo »
|
Atributos de formulario HTMLnovalidateSe utiliza para deshabilitar la validación predeterminada del navegador. |
|---|
Análisis del ejemplo
AngularJS ng-modelLa directiva se utiliza para vincular elementos de entrada al modelo.
El objeto del modelo tiene dos atributos:useryemail。
Hemos utilizado lang-showdirectiva,color:reden el correo electrónico,$dirtyo$invalidsolo se muestra cuando ambos son true.
| Atributo | Descripción |
|---|---|
| $dirty | El formulario ha sido modificado |
| $valid | El contenido del campo es válido |
| $invalid | El contenido del campo no es válido |
| $pristine | El formulario no ha sido modificado |