Verificación de entrada AngularJS
Las formas y controles AngularJS pueden verificar los datos de entrada.
Ingrese la verificación
En los capítulos anteriores, ha aprendido sobre las formas y controles de AngularJS.
Los formularios y controles AngularJS pueden proporcionar capacidades de verificación y advertir sobre los datos ilegales ingresados por los usuarios.
Nota: La verificación del cliente no puede garantizar la seguridad de los datos de entrada del usuario, por lo que la verificación de datos en el servidor también es necesaria.
Código de aplicación
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <h2> ng-Controller = "ValidAtectrl" name = "myForm" Novalidate> <p> UserName: <BR> <input type = "text" name = "user" ng-model = "user" requerido> <span style = "color: rojo" ng-show = "myform.user. $ dirty && myform.user. $ invalid"> <span ng ng.show = "myform.user. Se requiere nombre de usuario. </span> </span> </p> <p> Correo electrónico: <br> <input type = "correo electrónico" name = "correo electrónico" ng-model = "correo electrónico" requerido> <span style = "color: rojo" ng-show = "myform.email. $ sucio && myform.email. $ $ inválido"> <span ng-show = "myForm.Email. $ error.rrequired"> correos electrónicos es imprescindible. </span> <span ng-show = "myform.email. $ error.email"> Dirección de correo electrónico ilegal. </span> </span> </p> <p> <input type = "enviar" ng-disable = "myform.user. $ sucio && myform.user. $ invalid || myform.email. $ sucio && myform.email. $ invalid"> </p> </orm> <script> var app = angular.module ('myapp', []); app.controller (wathalc.controller (watidater.controller, function ($ scope) {$ scope.user = 'John doe';Resultados de ejecución:
Ejemplo de verificación
nombre de usuario:
Correo:
Nota: El atributo de formulario HTML Novalidate se usa para deshabilitar la verificación predeterminada del navegador.
Análisis de ejemplo
La directiva AngularJS Ng-Model se usa para unir elementos de entrada al modelo.
Un objeto modelo tiene dos propiedades: usuario y correo electrónico.
Usamos la Directiva NG-Show, Color: Red se muestra solo si el mensaje es $ sucio o $ inválido.
| propiedad | describir |
|---|---|
| $ sucio | Hay registros para completar el formulario |
| $ válido | El contenido de campo es legal |
| $ inválido | El contenido de campo es ilegal |
| $ prístino | No se llena ningún registro en el formulario |
Lo anterior es una compilación de la información de verificación de entrada AngularJS. Continuaremos complementándolo más tarde. Espero que pueda ayudar a los estudiantes que estudian.