Detaillierte Interpretation der Formularvalidierungsprogrammierung in AngularJS

Heim

Web-Frontend

js-Tutorial

Detaillierte Interpretation der Formularvalidierungsprogrammierung in AngularJS_AngularJS

May 16, 2016 pm 03:53 PM

angularjs 表单

Nachfrage

Name erforderlich
Der Benutzername ist optional, die Mindestlänge beträgt 3, die Höchstlänge beträgt 8
E-Mail ist nicht erforderlich, muss aber eine legale E-Mail-Adresse sein
Formulare, bei denen die Überprüfung fehlschlägt, können nicht eingereicht werden
Zeigt eine Fehlermeldung zum erforderlichen oder unzulässigen E-Mail-Format an
Bei korrekter Übermittlung erscheint eine Glückwunschnachricht

Jetzt, da wir unser Ziel kennen, lassen Sie uns dieses Ding gemeinsam aufbauen.

Winkelformeigenschaften $valid, $invalid, $pristine, $dirty

Angular stellt Eigenschaften für Formulare bereit, um uns bei der Validierung von Formularen zu helfen. Sie liefern uns verschiedene Informationen über ein Formular und seine Eingaben und gelten für das Formular und die Eingaben.
Attributklasse
Beschreibung

$valid ng-valid Boolean sagt uns, ob dieser Artikel derzeit basierend auf den von Ihnen festgelegten Regeln überprüft wird
$invalid ng-invalid Boolean sagt uns, ob dieses Element derzeit die Überprüfung basierend auf den von Ihnen festgelegten Regeln nicht besteht
$pristine ng-pristine Boolean True, wenn das Formular oder Eingabefeld nicht verwendet wird
$dirty ng-dirty Boolean True, wenn das Formular oder Eingabefeld verwendet wird

Angular bietet auch Klassen für Formulare und ihre Eingabefelder, sodass Sie deren Stile je nach Status festlegen können.
Auf Formulareigenschaften zugreifen

Orientierungsformular: <Formularname>.<Angulareigenschaft>
Greifen Sie auf ein Eingabefeld zu: <Formularname>.<Eingabename>.<Angular-Eigenschaft>

Richten Sie unser Formular ein

Wir werden zur Demonstration ein einfaches Formular verwenden.

201561995404669.png (765×364)

Wir benötigen zwei Dateien:

index.html Der Code, den wir verwenden, um das Formular
app.js Unsere Angular-Anwendung und unser Controller (kaum Code)

Unser Formularcode index.html

&lt;!-- index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;!-- CSS ===================== --&gt;
  &lt;!-- load bootstrap --&gt;
  &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt; 
  &lt;style&gt;
    body   { padding-top:30px; }
  &lt;/style&gt;
   
  &lt;!-- JS ===================== --&gt;
  &lt;!-- load angular --&gt;
  &lt;script src="http://code.angularjs.org/1.2.6/angular.js"&gt;&lt;/script&gt; 
  &lt;script src="app.js"&gt;&lt;/script&gt;
&lt;/head&gt;
 
&lt;!-- apply angular app and controller to our body --&gt;
&lt;body ng-app="validationApp" ng-controller="mainController"&gt;
&lt;div class="container"&gt;
&lt;div class="col-sm-8 col-sm-offset-2"&gt;
   
  &lt;!-- PAGE HEADER --&gt;
  &lt;div class="page-header"&gt;&lt;h1&gt;AngularJS Form Validation&lt;/h1&gt;&lt;/div&gt;
  
  &lt;!-- FORM --&gt;
  &lt;!-- pass in the variable if our form is valid or invalid --&gt;
  &lt;form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate&gt; &lt;!-- novalidate prevents HTML5 validation since we will be validating ourselves --&gt;
 
    &lt;!-- NAME --&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Name&lt;/label&gt;
      &lt;input type="text" name="name" class="form-control" ng-model="name" required&gt;
    &lt;/div&gt;
 
    &lt;!-- USERNAME --&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Username&lt;/label&gt;
      &lt;input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"&gt;
    &lt;/div&gt;
     
    &lt;!-- EMAIL --&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Email&lt;/label&gt;
      &lt;input type="email" name="email" class="form-control" ng-model="email"&gt;
    &lt;/div&gt;
     
    &lt;!-- SUBMIT BUTTON --&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
     
  &lt;/form&gt;
 
&lt;/div&gt;&lt;!-- col-sm-8 --&gt;
&lt;/div&gt;&lt;!-- /container --&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Hier sind einige wichtige Punkte:

novalidate: Es verhindert die standardmäßige HTML5-Validierung, da wir sie selbst durchführen (unsere eigene wird besser sein)
Wir haben ng-model auf das Eingabefeld angewendet, um Daten aus dem Formular an Winkelvariablen zu binden
Die ng-minlength und ng-maxlength des Benutzernamens erstellen eigene Regeln
Das Namenseingabefeld ist erforderlich
Das E-Mail-Eingabefeld hat das Attribut type="email"

Validierungsregeln

Angular verfügt über viele Validierungsregeln, z. B. Tong-Min-Länge statt DNG-Max-Länge.

Angular kann auch eigene Regeln konfigurieren. Anweisungen finden Sie im Angular-Eingabehandbuch

&lt;input
  ng-model="{ string }"
  name="{ string }"
  required
  ng-required="{ boolean }"
  ng-minlength="{ number }"
  ng-maxlength="{ number }"
  ng-pattern="{ string }"
  ng-change="{ string }"&gt;
&lt;/input&gt;

Nach dem Login kopieren

Nachdem das Formular erstellt wurde, erstellen Sie die Angular-Anwendung und den Controller, ng-app ng-controller.

Angewandter Codeapp.js

// app.js
// create angular app
var validationApp = angular.module('validationApp', []);
 
// create angular controller
validationApp.controller('mainController', function($scope) {
 
  // function to submit the form after all validation has occurred      
  $scope.submitForm = function(isValid) {
 
    // check to make sure the form is completely valid
    if (isValid) {
      alert('our form is amazing');
    }
 
  };
 
});

Nach dem Login kopieren

Aktivieren Sie die Novavalidierung des HTML5-Validators

Wir werden Novalidat in unserem Formular verwenden. Dies ist eine gute Vorgehensweise, da wir die Validierung selbst durchführen. Wenn wir dies unserem Formular überlassen würden, würde es hässlich aussehen.

201561995443961.png (641×170)

Senden-Schaltfläche deaktivieren ng-disabled

Jetzt beginnt die eigentliche Show. Wir beginnen mit der Verwendung von Winkeleigenschaften. Lassen Sie uns zunächst unseren Senden-Button deaktivieren. Wenn unser Formular $invalid ist, möchten wir es einfach deaktivieren.

&lt;!-- index.html --&gt;
...
 
  &lt;!-- SUBMIT BUTTON --&gt;
  &lt;button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid"&gt;Submit&lt;/button&gt;
 
...

Nach dem Login kopieren

Mit nur einem kleinen Code (ng-disabled) werden die Formularschaltflächen deaktiviert, wenn unser Formular $invalid ist.

Das bedeutet, dass unser Namenseingabefeld erforderlich ist und unser E-Mail-Eingabefeld eine gültige E-Mail-Adresse erfordert.

Verwenden Sie eng-show, um Fehlermeldungen anzuzeigen

ng-valid und ng-invalid validieren die Eingabe automatisch basierend auf den bereitgestellten Formularregeln.

Wir fügen im Eingabeteil einige Fehlerinformationen hinzu, sofern diese nicht gleich $valid sind oder verwendet wurden (sie können nicht als unbenutzt angezeigt werden).

&lt;!-- index.html --&gt;
...
 
  &lt;!-- NAME --&gt;
  &lt;div class="form-group"&gt;
    &lt;label&gt;Name&lt;/label&gt;
    &lt;input type="text" name="name" class="form-control" ng-model="name" required&gt;
    &lt;p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block"&gt;You name is required.&lt;/p&gt;
  &lt;/div&gt;
 
  &lt;!-- USERNAME --&gt;
  &lt;div class="form-group"&gt;
    &lt;label&gt;Username&lt;/label&gt;
    &lt;input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"&gt;
    &lt;p ng-show="userForm.username.$error.minlength" class="help-block"&gt;Username is too short.&lt;/p&gt;
    &lt;p ng-show="userForm.username.$error.maxlength" class="help-block"&gt;Username is too long.&lt;/p&gt;
  &lt;/div&gt;
   
  &lt;!-- EMAIL --&gt;
  &lt;div class="form-group"&gt;
    &lt;label&gt;Email&lt;/label&gt;
    &lt;input type="email" name="email" class="form-control" ng-model="email"&gt;
    &lt;p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block"&gt;Enter a valid email.&lt;/p&gt;
  &lt;/div&gt;
 
...

Nach dem Login kopieren

就像这样 Angular 会根据规则来验证输入部分的$invalid 和 $pristine properties属性从而决定是否显示错误信息.

201561995503615.png (799×437)

格局类

Angular在验证输入或表单时的有效有否是已经提供了一些类，像是 (ng-valid,ng-invalid,ng-pristineandng-dirty).

你可以编辑自己喜欢的CSS . 你可以私有定制化这些类来实现特定的场景应用.

.ng-valid     { }
.ng-invalid   { }
.ng-pristine   { }
.ng-dirty     { }
 
/* really specific css rules applied by angular */
.ng-invalid-required     { }
.ng-invalid-minlength     { }
.ng-valid-max-length     { }

Nach dem Login kopieren

使用 ng-class 根据条件添加类

因为我们使用了 Bootstrap, 我们将就使用它们提供的类(has-error). 这样就能围绕我们的form-group获得漂亮的错误信息和颜色.

ng-class 允许我们基于一个表达式添加类. 在这种情况下，我们想要想我们的form-group添加一个 has-error 类，如果输入框的状态是$invalid或者不是pristine的话.

其工作的方式是 ng-class="{ <class-you-want> : <expression to be evaluated > }". 更多的信息，请读一读 Angular ngClass 文档吧.

&lt;!-- index.html --&gt;
...
 
  &lt;!-- NAME --&gt;
  &lt;div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }"&gt;
    &lt;label&gt;Name&lt;/label&gt;
    &lt;input type="text" name="name" class="form-control" ng-model="user.name" required&gt;
    &lt;p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block"&gt;You name is required.&lt;/p&gt;
  &lt;/div&gt;
   
  &lt;!-- USERNAME --&gt;
  &lt;div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }"&gt;
    &lt;label&gt;Username&lt;/label&gt;
    &lt;input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"&gt;
    &lt;p ng-show="userForm.username.$error.minlength" class="help-block"&gt;Username is too short.&lt;/p&gt;
    &lt;p ng-show="userForm.username.$error.maxlength" class="help-block"&gt;Username is too long.&lt;/p&gt;
  &lt;/div&gt;
     
  &lt;!-- EMAIL --&gt;
  &lt;div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }"&gt;
    &lt;label&gt;Email&lt;/label&gt;
    &lt;input type="email" name="email" class="form-control" ng-model="user.email"&gt;
    &lt;p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block"&gt;Enter a valid email.&lt;/p&gt;
  &lt;/div&gt;
 
...

Nach dem Login kopieren

现在我们的表单就有了恰当的Bootstrap错误类.

201561995526100.png (770×449)

只在提交表单后显示错误信息

有时候不想在用户正在输入的时候显示错误信息. 当前错误信息会在用户输入表单时立即显示. 由于Angular很棒的数据绑定特性，这是可以发生的. 因为所有的事务都可以在一瞬间发生改变，这在表单验证时会有副作用.

对于你想要只在表单正要提交之后才显示错误消息的场景, 你就需要对上面的代码做一些小调整.

你要去掉提交按钮上的ng-disabled，因为我们想要用户即使是在表单没有全部验证完的情况下也能点击提交.
你要在表单已经被提交之后添加一个变量. 在你的 submitForm() 函数中, 只要加入 $scope.submitted = true 就行了;. 一旦表单被提交，它就会保存提交值为true的submitted变量.
将错误规则从ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }" 调整为 ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine && submitted }". 这就确保了错误消息只会在表单被提交时被显示出来. 你也许会需要为这个变量调整所有其它的 ng-class 和 ng-show.

现在，只有在submitted变量被设置为true时才会显示错误信息.

只有在输入框之外点击时才显示错误消息

只有在输入框之外点击时才显示错误消息（也被叫做失去焦点 blur) 这一需求比在提交时验证要复杂一点. 在失去焦点时验证表单需要一个custom指令. 这是一个可以让你操作DOM的指令.

我们正在写一篇文章专门讨论此话题。同时，还有其他的一些资源讨论了创建custom指令来处理失去焦点的情况:

http://coding-issues.blogspot.in/2013/10/angularjs-blur-directive.html
http://blog.ejci.net/2013/08/06/dealing-with-focus-and-blur-in-angularjs-directives/
http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview

全部完成

现在一旦我们正确填写了所有的信息，我们的表单提交按钮就能使用了. 一旦我们提交了表单，我们将会见到我们设置的弹出消息.

201561995546318.png (376×169)

用了几行我们就可以:

进行输入框验证
显示表单错误消息
定制样式类
自动禁止和启用表单
定制规则

如你所见，我们使用了Angular内置的表单验证技术来创建一个客户端验证表单.

Erklärung dieser Website

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