AngularJS utilise ngMessages pour la validation du formulaire_AngularJS

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

用户名

<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>


邮箱







提交

{{userForm.name.$error}}
{{userForm.email.$error}}

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 b1010a975dc5ebb8b976dafe68a17c7a16b28748ea4df4d9c2150843fecfba68.

<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 :

Copier le code Le code est le suivant :

616e23c8908e86aa78c46049b9cedac4

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 :

Copier le code Le code est le suivant :

98d5fcb979fcf1c21f11fdb6e9d615a2

3. Longueur maximale

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 :

Copier le code Le code est le suivant :

44bcd696cf393169990dcefab9a1c0d1

4. Correspondance de motifs

Utilisez ng-pattern="/PATTERN/" pour vous assurer que l'entrée correspond à l'expression régulière spécifiée :

Copier le code Le code est le suivant :

44ccc91a1cd14c1ff9a3a4b62eafbda4

5. E-mail

Pour vérifier si le contenu saisi est un e-mail, définissez simplement le type d'entrée sur e-mail comme suit :

Copier le code Le code est le suivant : 0fc2238b24406628fab06303f67dd720

6. Chiffres

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

Le code est le suivant : 1005edcba35f1e29b15d03212ac61afe

7.URL

Vérifiez si le contenu d'entrée est une URL, définissez le type d'entrée sur url :

Copier le code

Le code est le suivant : 2d5e778ccf3e277f55cb74d94d81e313