AngularJs implémente le formulaire ng1.3 validation

AngularJs implémente le formulaire ng1.3 validation_AngularJS

WBOY

Libérer： 2016-05-16 15:26:28

original

1365 Les gens l'ont consulté

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 :

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

erreur.html

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

Copier après la connexion

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>

Copier après la connexion

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