Heim > Artikel > Web-Frontend > AngularJs implementiert ng1.3 form validation_AngularJS

AngularJs implementiert ng1.3 form validation_AngularJS

WBOYOriginal: 2016-05-16 15:26:281277Durchsuche

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:

aa7ff88c20098d2a3f945f8b125fe1b2

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>

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>

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>

error.html

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

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>

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Express-Routing_Javascript-FähigkeitenNächster Artikel：Detaillierte Erläuterung der Express-Routing_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen