Maison > Article > interface Web > AngularJs implémente le formulaire ng1.3 validation_AngularJS

AngularJs implémente le formulaire ng1.3 validation_AngularJS

WBOYoriginal: 2016-05-16 15:26:281277parcourir

Explication détaillée de l'article précédentImplémentation AngularJS de la validation de formulaireComme je l'ai dit, la validation de formulaire sera optimisée après ng1.3. Elle ne nécessite plus un état d'expression détaillé pour créer un élément à afficher ou à masquer. .

Par exemple : Nos versions antérieures à ng1.3 doivent être écrites comme suit :

Copier le code Le code est le suivant :

dc75e6f59b2674bb59a333433525714d

Une nouvelle directive ngMessages a été ajoutée après ng1.3. Elle est empaquetée dans un module et publiée, donc lorsque nous l'utilisons, il nous suffit d'introduire ce module dépendant .

Copier le code Le code est le suivant :

angular.module('myApp', ['ngMessages' ]);

Comment utiliser ?

Apprenons maintenant à l'utiliser. Le code est le suivant :

<!DOCTYPE html>
<html ng-app="myTest">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Javascript/angular.js"></script>
    <script src="~/Javascript/angular-messages.js"></script>

    <style type="text/css">
      body {
        padding-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="col-md-6">
      <form role="form" name="myForm" class="form-horizontal" novalidate>
        <div class="form-group">
          <div class="col-md-2">
            用户名
          </div>
          <div class="col-md-10">
            <input type="text" placeholder="ng-Messages测试" name="name" ng-model="username.name"
                ng-minlength=3 ng-maxlength=20 required />
            <hr/>
            $error：{{myForm.name.$error}}
            <hr/>
            <div ng-messages="myForm.name.$error">
              <div ng-message="required">必填项</div>
              <div ng-message="minlength">字符太短小于3</div>
              <div ng-message="maxlength">字符太长大于20</div>
            </div> 
          </div>
        </div>
      </form>
    </div>
  </body>
</html>
<script type="text/javascript">
   angular.module("myTest", ['ngMessages']);
</script>

L'effet est le suivant :

On peut voir que ng surveille en fait les changements de modèle via $error, car $error contient des informations détaillées sur l'erreur. En même temps, s'il y a plusieurs erreurs en même temps dans notre scénario d'application, alors le code ci-dessus. Un seul message d'erreur sera affiché dans l'ordre de ng-message. Si nous devons tous les afficher, il suffit d'ajouter ng-messages-multiple

<input type="text" placeholder="测试" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error" ng-messages-multiple>
<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>  
<div ng-message="maxlength">字符太长大于20</div>
</div>

L'effet est le suivant :

Comment réutiliser ?

La plupart de nos informations de vérification sont très polyvalentes dans un projet (très cohérentes dans les styles, les descriptions, etc.), nous envisagerons donc également de les réutiliser ici, et ng fournit également une solution

Utilisez-le simplement comme modèle et le chemin de requête spécifié sera automatiquement ajouté par ng. Voici une autre directive ng-messages-include

Nous enregistrons les informations de vérification ci-dessus sur une page statique HTML distincte, puis utilisons ng-messages-include pour spécifier le chemin de la requête.

Code :

 <div ng-messages="myForm.name.$error" ng-messages-multiple
    ng-messages-include ="@Url.Content("~/Content/template/error.html")">
  </div>

erreur.html

<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>

L'effet est le suivant :

Bien entendu, le modèle peut ne pas répondre à vos exigences pour certaines invites d'erreur de champ lors de périodes spéciales. Vous pouvez ajouter des invites personnalisées comme suit :

<div class="error" ng-messages="signup_form.name.$error" 
ng-messages-include="templates/errors.html"> 
<!-- 
  按ng-message的顺序依次覆盖
--> 
</div>

La vérification personnalisée (instructions) implique beaucoup de détails et de connaissances. Si vous l'utilisez simplement pour le plaisir, vous pourrez peut-être écrire la fonction, mais le code est moche et trop maladroit. quelques mois pour le comprendre. La partie superficielle est terminée pour l'instant. Une fois que vous l'aurez pleinement compris, je le partagerai avec vous. Vous pouvez également l'étudier en combinaison avec "Comprendre les commandes AngularJs" .

Déclaration：

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

Article précédent：Explication détaillée des compétences Express Routing_JavascriptArticle suivant：Explication détaillée des compétences Express Routing_Javascript

Articles Liés

Voir plus