AngularJS est né en 2009, créé par Misko Hevery et d'autres, puis acquis par Google. Il s'agit d'un excellent framework JS frontal qui a été utilisé dans de nombreux produits Google. AngularJS possède de nombreuses fonctionnalités, dont les plus essentielles sont : MVVM, modularisation, liaison de données bidirectionnelle automatisée, balises sémantiques, injection de dépendances, etc.
Le module nommé "ngMessages" est installé via npm install angulaire-messages. Avant d'utiliser ngMessages, nous pourrions écrire une validation comme ceci :
<form name="userForm"> <input type="text" name="username" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required> <p ng-show="userForm.username.$error.minlength">Username is too short.</p> <p ng-show="userForm.username.$error.maxlength">Username is too long.</p> <p ng-show="userForm.username.$error.required">Your username is required.</p> </form>
Ce qui précède répertorie chaque échec de vérification possible et indique manuellement s'il faut afficher le message d'erreur.
Avec le module "ngMessages", cela peut s'écrire à peu près comme ceci :
<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched"> <p ng-message="minlength">用户名最小长度5</p> <p ng-message="maxlength">用户名最大长度10</p> <p ng-message="required">用户名必填</p> </div>
ngMessages détermine automatiquement quelle erreur afficher pour nous.
Plusieurs points clés lors de l'utilisation de ngMessages :
● npm install angulaire-messages
● Citation : angulaire-messages.js
● Dépendance : angulaire.module('app',['ngMessages'])
Voici une démo simple, structure de fichier :
node_modules/
app.js
emailmessages.html
index.html
L'installation est la suivante :
npm installer bootstrap
npm installer angulaire
npm installe des messages angulaires
==index.html
app.js
angular.module('app',['ngMessages']) .controller('MainCtrl', MainCtrl); function MainCtrl(){ }
emailmessages.html
Placez ici le formulaire de vérification lié au courrier électronique et affichez-le quelque part sur la page via
.<p ng-message="required">邮箱必填</p> <p ng-message="minlength">邮箱长度太短</p> <p ng-message="maxlength">邮箱长度太长</p> <p ng-message="email">邮箱无效</p>
ps : Instructions de validation de formulaire couramment utilisées
1. Vérification des champs obligatoires
Si une saisie de formulaire a été renseignée, ajoutez simplement la balise HTML5 requise sur l'élément du champ de saisie :
2. Longueur minimale
Pour vérifier si la longueur du texte de la saisie du formulaire est supérieure à une certaine valeur minimale, utilisez la commande ng-minleng= "{number}" sur le champ de saisie :
Pour vérifier si la longueur du texte de la saisie du formulaire est inférieure ou égale à une certaine valeur maximale, utilisez la commande ng-maxlength="{number}" sur le champ de saisie :
Utilisez ng-pattern="/PATTERN/" pour vous assurer que l'entrée correspond à l'expression régulière spécifiée :
Pour vérifier si le contenu saisi est un e-mail, définissez simplement le type d'entrée sur e-mail comme suit :
Vérifiez si le contenu de l'entrée est un nombre et définissez le type d'entrée sur nombre :
Copier le code
Copier le code