Comme indiqué dans la figure ci-dessus, nous devons implémenter les fonctions de vérification suivantes:
Les commandes sont des contrôles requis
Tous ont besoin de contrôler la longueur maximale
La première fois que la page est ouverte, le contrôle ne peut pas être affiché comme état d'erreur
Une fois le contenu d'entrée effacé, le contrôle d'entrée requis doit être affiché en tant qu'état d'erreur
Le bouton Publier ne peut être disponible qu'après que toutes les entrées sont valides.
Avec AngularJS, nous pouvons facilement implémenter ces exigences, une seule ligne de code JS est requise. Le style d'interface utilisateur utilise Bootstrap ici. Commençons par l'exemple de code:
Html.
<! Doctype html> <html lang = "zh-cn" ng-app = "ftitApp"> <éadf> <meta charset = "utf-8" /> <title> Demo </title> <link href = "/ contenu / bootstrap.css" rel = "stylesheet" /> <script src = "/ scripts / angular.js"> </ script> </ head> <body> <div> <! - principal de contenu -> <div> <div> <! - Contactez-nous la zone de formulaire -> <form action = "/ contact / create" method = "post" role = "form" name = "CreateContactform" NG-Controller = "ContacteCreateConTroller"> <! ng-class = "{'has-success' :! createContactForm.Username. $ corbute && createContactForm.Username. $ valide, 'has-error' :! CreateContactForm.Username. $ Pristine && createContactForm.Username. ng-model = "username" name = "username" autofocus = "" requis ng-maxLength = 30> <div ng-show = "! createContactForm.Username. $ Pristine && createContactForm.USERNAME. $ valid"> <span> </span> </v> <div ng-show = "! CreateContactForm.SUSERNAME. createContactForm.Username. $ invalid "> <span> </span> </div> <! - Adresse e-mail UserMail -> <div ng-class =" {'has-success' :! createContactForm.UserMail. $ Pristine && createContactForm.UserMail. $ valid, 'has-error':! CreateConTform.User.User. $ PRISTENSE &&&yn ':! CreateContactForm.UserMail. $ invalid} "> <étiquette pour =" UserMail "> Adresse e-mail * </ Label> <Input Type =" Email "ng-model =" Usermail "name =" UserMail "Ng-MaxLength = 30> <div ng-show ="! CreateContactForm.User> </spristine && CreateContactForm.USERMAL.USERMAIL. </div> <div ng-show = "! CreateContactForm.UserMail. $ Dusttine && createContactForm.UserMail. $ invalid"> <span> </span> </div> </div> <! - Sujet -> <div ng-class = "{'has-sucCess' :! CreateContform. 'has-error' :! createContactForm.subject. $ corbers && createContactForm.subject. $ invalid} "> <label for =" sujet "> sujet * </bold> <entrée type =" text "ng-model =" sujet "name =" sujet "requis ng-maxLengthreft createContactForm.Subject. $ valide "> <span> </span> </div> <div ng-show ="! createContactForm.Subject. $ pristine && createContactForm.Subject. $ invalid "> <span> </span> </ ' ! CreateContactForm.Content. $ Pristine && createContactForm.Content. $ valid, 'has-error' :! createContactForm.Content. $ corbastine && createContactForm.Content. $ invalid} "> <label for =" contenu "> contenu * </ label> <textarea cols =" 4 "rows =" 5 "ng-mod =" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "contenu" contenu "Content" Content "Content" Content "Content" Content "Content" Content "Content" Content "Content" Content "Content" Content "Content" Content "contenu" Row ng-maxLength = 1000> </ textarea> <div ng-show = "! createContactForm.content. $ corbastine && createContactForm.content. $ valid"> <span> </span> </v> <div ng-show = "! CreateContactForm.content. </ div> <! - Button Soumettre -> <div> <div ng-show = "CreateContactForm. $ valid"> <input type = "image" src = "/ contenu / images / comment_publish_button.png" onSubmit = "soumid ();" Value = "Publish" Ng-Disabled = '! CreateContactForm. $ Valid' /> </ Div> <div ng-show = "! CreateContactForm. $ Valid"> <img src = "/ contenu / images / invalid_publish_button.png" /> </v> </ form> </v> </v> </ving src = "/ scripts / ftit / contactCreateController.js"> </ script> </ body> </html>JS Code (c'est vraiment une seule ligne)
ContracteCreateController.js
var ftitAppModule = angular.module ('ftitApp', []);C'est très bien. Quelques points clés à expliquer:
Classe NG: cette balise est utilisée pour contrôler la valeur de la classe. Par exemple, ng-class = "{'has-sucre' :! createContactForm.Content. $ Prittine} signifie que si la valeur de! CreateContactForm.Content. $ Pristine est vraie, la valeur de la classe est de réussite.
NG-SHOW: contrôle si le contrôle est affiché.
createContactForm. $ valide: une fois toutes les vérifications passées, la valeur est vraie, sinon elle est fausse
createContactForm.Content. $ Valid: identifie si le contrôle du contenu passe la vérification, passe vrai, sinon il est faux
CreateContactForm.Content. $ vestime: identifie si le contrôle du contenu n'a jamais été entré. Il n'est jamais entré comme vrai, sinon c'est faux
Pour des problèmes techniques plus détaillés, veuillez consulter la documentation technique AngularJS.