Como se muestra en la figura anterior, necesitamos implementar las siguientes funciones de verificación:
Se requieren controles
Todos necesitan controlar la longitud máxima
La primera vez que se abre la página, el control no se puede mostrar como un estado de error
Después de borrar el contenido de entrada, el control de entrada requerido debe mostrarse como un estado de error
El botón de publicación solo puede estar disponible después de que todas las entradas son válidas.
Con AngularJS, podemos implementar fácilmente estos requisitos, solo se requiere 1 línea de código JS. El estilo de la interfaz de usuario usa Bootstrap aquí. Comencemos con el código de muestra:
Html.
<! Doctype html> <html lang = "zh-cn" ng-app = "ftitapp"> <head> <meta charset = "utf-8"/> <title> demo </title> <link href = "/content/bootstrap.css" rel = "stylesheet"/> <script src = "/scripts/angular.js"> </script> </head> <body> <div> <!-área de contenido principal-> <div> <div> <!-contactación en el área de formular ng-class = "{'ha-success':! createContactForm.username. $ pristine && createContactForm.username. $ válido, 'ha-error':! CreateContactForm.username. $ pristine && createContAnform.username. $ Inválido}"> <etiqueta para = "username"> su nombre*</laberatel> <typing type = "text" ng-model = "username" name = "username" autofocus = "" requerido ng-maxLength = 30> <div ng ng-show = "! CreateContactForm.username. $ pristine && createContactForm.username. $ válido"> <span> </span> </div> <div ng-show = " createContactForm.Username. $ Invalid "> <span> </span> </div> <!-Usermail Dirección de correo electrónico-> <div ng-class =" {'ha-success':! createContactForm.usermail. $ pristine && createContform. createContactForm.Usermail. $ Invalid} "> <etiqueta for =" usermail "> dirección de correo electrónico*</etiqueta> <input type =" correo electrónico "ng-model =" usermail "name =" usermail "requerido ng-maxlength </div> <div ng-show = "! CreateContactForm.usermail. $ pristine && createContactForm.usermail. $ invalid"> <span> </span> </div> </div> <!-temas-> <div ng-class = "{'ha-success': 'ha-error':! createContactForm.subject. $ pristine && createContactForm.subject. $ Invalid} "> <etiqueta for =" sujeto "> sujeto*</label> <input type =" text "ng-model =" saters "name =" somet "requerido ng-maxlength longitud createContactForm.subject. $ válido "> <span> </span> </div> <div ng-show ="! CreateContactForm.subject. $ Pristine && CreateContactForm.subject. $ Invalid "> <span> </span> </div> </div> <!-Content-> <Div ng-class =" {'ha-success': ':': ':': ':' ! createContactForm.content. $ pristine && createContactForm.content. $ válido, 'ha-error':! createContactForm.content. $ pristine && createContactform.content. $ invalid} "> <etiqueta for =" content "> contenido*</selabel> <xtexArea cols =" 4 "Rows =" 5 "ng-mmodel" name "n. ng-maxLength = 1000> </exteArea> <div ng-show = "! CreateContactForm.content. $ pristine && createContactForm.content. $ válido"> <span> </span> </div> <div ng-show = "! CreeContAnform.content. $ pristine && createContform.content. $ invalid" <!-Botón de envío-> <div> <div ng-show = "createContactForm. $ Válido"> <input type = "image" src = "/content/images/comment_publish_button.png" onsubmit = "shit ();"; value = "publicar" ng-disable = '! CreateContactForm. $ válido'/> </div> <div ng-show = "! CreateContactForm. $ válido"> <img src = "/content/images/invalid_publish_button.png"/> </div> src = "/scripts/ftit/contactCreateController.js"> </script> </body> </html>Código JS (en realidad es solo una línea)
ContractCreateController.js
var ftitAppModule = angular.module ('ftitApp', []);Está bien. Algunos puntos clave para explicar:
Ng-Class: esta etiqueta se usa para controlar el valor de la clase. Por ejemplo, ng-class = "{'ha-success':! CreateContactForm.content. $ Pristine} significa que si el valor de! CreateContactform.content. $ Pristine es verdadero, el valor de la clase tiene éxito.
ng-show: controla si se muestra el control.
createContactForm. $ Válido: después de que se aprueba toda la verificación, el valor es verdadero, de lo contrario es falso
createContactForm.content. $ Válido: identifica si el control de contenido pasa la verificación, pasa verdadero, de lo contrario es falso
createContactForm.content. $ Pristine: identifica si el control de contenido nunca se ha ingresado. Nunca se ingresa como verdadero, de lo contrario es falso
Para obtener problemas técnicos más detallados, consulte la documentación técnica de AngularJS.