Maison > interface Web > js tutoriel > le corps du texte

AngularJS utilise ngMessages pour la validation du formulaire_AngularJS

WBOY
Libérer: 2016-05-16 15:23:19
original
1216 Les gens l'ont consulté

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>

Copier après la connexion

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>
Copier après la connexion

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}}
Copier après la connexion

app.js

angular.module('app',['ngMessages'])
.controller('MainCtrl', MainCtrl);
function MainCtrl(){
}
Copier après la connexion

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>
Copier après la connexion

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 :


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 :


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 :



4. Correspondance de motifs

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



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 :



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


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 :
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal