AngularJs implementiert ng1.3 form validation

AngularJs implementiert ng1.3 form validation_AngularJS

WBOY

Freigeben： 2016-05-16 15:26:28

Original

1322 Leute haben es durchsucht

Ausführliche Erklärung des vorherigen ArtikelsAngularJS-Implementierung der FormularvalidierungWie gesagt, die Formularvalidierung wird nach ng1.3 optimiert. Es ist kein detaillierter Ausdrucksstatus mehr erforderlich, um ein Element zum Anzeigen oder Ausblenden zu erstellen .

Zum Beispiel: Unsere Versionen vor ng1.3 müssen wie folgt geschrieben werden:

Code kopieren Der Code lautet wie folgt:

Nach ng1.3 wurde eine neue ngMessages-Direktive hinzugefügt. Sie wird in ein Modul gepackt und veröffentlicht. Wenn wir sie also verwenden, müssen wir nur dieses abhängige Modul einführen

Code kopieren Der Code lautet wie folgt:

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

Wie benutzt man?

Jetzt lernen wir, wie man es benutzt. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

Es ist ersichtlich, dass ng tatsächlich Modelländerungen über $error überwacht, da $error detaillierte Informationen zum Fehler enthält. Wenn in unserem Anwendungsszenario gleichzeitig mehrere Fehler auftreten, dann der obige Code In der Reihenfolge von ng-message wird nur eine Fehlermeldung angezeigt. Wenn wir sie alle anzeigen müssen, müssen wir nur ng-messages-multiple

hinzufügen

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie kann man es wiederverwenden?

Die meisten unserer Verifizierungsinformationen sind in einem Projekt sehr vielseitig (sehr konsistent in Stilen, Beschreibungen usw.), daher werden wir hier auch eine Wiederverwendung in Betracht ziehen, und ng bietet auch eine Lösung

Verwenden Sie es einfach als Vorlage und der angegebene Anforderungspfad wird automatisch von ng hinzugefügt. Hier ist eine weitere Anweisung ng-messages-include

Wir speichern die oben genannten Verifizierungsinformationen auf einer separaten statischen HTML-Seite und verwenden dann ng-messages-include, um den Anforderungspfad anzugeben.

Code:

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

Nach dem Login kopieren

error.html

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

Natürlich erfüllt die Vorlage möglicherweise nicht Ihre Anforderungen für bestimmte Feldfehleraufforderungen in besonderen Zeiträumen. Sie können benutzerdefinierte Eingabeaufforderungen wie folgt hinzufügen:

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

Nach dem Login kopieren

Benutzerdefinierte Überprüfung (Anweisungen) erfordert viele Details und Wissen. Wenn Sie es nur zum Zweck der Verwendung verwenden, können Sie die Funktion möglicherweise schreiben, aber der Code ist hässlich und zu umständlich Einige Monate, um es zu verstehen. Sobald Sie es vollständig verstanden haben, können Sie es auch in Kombination mit „AngularJs-Befehle verstehen“ studieren.