Latest web development tutorials

AngularJS validación de entradas

AngularJS formularios y controles pueden validar las entradas de datos.


validación de entradas

En las secciones anteriores, que han aprendido los conocimientos sobre AngularJS formularios y controles.

AngularJS formularios y controles pueden ofrecer funciones de validación y los datos ilegales introducidos por el usuario una advertencia.

nota Compruebe que el cliente no puede garantizar la seguridad de la entrada de datos del usuario, servidor de validación de datos también es necesaria.

El código de aplicación

<! DOCTYPE html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Cuerpo>

<H2> Validación Ejemplo </ h2 >

<Forma ng-app = "myApp " ng-controller = "validateCtrl"
name = "myForm" novalidate>

<P> Nombre de usuario: <br>
<Input type = "text" name = "usuario" ng-modelo = "usuario" requerida>
<Span style = "color: red " ng-show = ".. MyForm.user $ sucia && $ myForm.user válido">
<Span ng-show = "myForm.user . $ Error.required"> nombre de usuario es necesario. </ Span>
</ Span>
</ P>

<P> E-mail: <br>
<Type = "email" Nombre de entrada = "email" ng-modelo = "email" requerida>
<Span style = "color: red " ng-show = ".. MyForm.email $ sucia && $ myForm.email válido">
<Span ng-show = "myForm.email . $ Error.required"> buzón es una necesidad. </ Span>
<span ng-show = "myForm.email . $ Error.email"> buzones ilegales. </ Span>
</ Span>
</ P>

<P>
<Input type = "submit"
ng-disabled = "myForm.user. $ sucia && myForm.user. $ inválida ||
myForm.email. $ && sucia myForm.email. $ inválida ">
</ P>

</ Form>

<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'validateCtrl', function ($ ámbito de aplicación) {
$ Scope.user = 'John Doe';
$ Scope.email = '[email protected]';
});
</ Script>

</ Body>
</ Html>

Trate »

nota formulario HTML atributos novalidate para deshabilitar la validación por defecto del navegador.

Ejemplos de analítica

AngularJS instrucción ng-modelo se utiliza para enlazar los elementos de entrada para el modelo.

objeto de modelo tiene dos atributos: el usuario y el correo electrónico.

Utilizamos comando ng presentas, color: rojo en el mensaje es de sólo $ pantalla inválida sucio o $.

propiedad descripción
$ sucia Hay formas para llenar registro
$ Válido contenido del campo legítimo
$ válida contenido de los campos son ilegales
$ prístina Sin formularios registro