AngularJS-Formularvalidierung mit ngMessages

Fast jede Website verwendet Formulare, um verschiedene Aufgaben auszuführen, wie zum Beispiel die Registrierung von Benutzern oder das Abrufen ihrer Kontaktinformationen. Es ist wichtig sicherzustellen, dass der Benutzer, der das Formular ausfüllt, zumindest gültige Informationen in die Eingabefelder eingibt.

Außerdem muss dem Benutzer eine detaillierte Fehlermeldung angezeigt werden, damit er das Formular korrekt ausfüllen kann. Dieser Vorgang kann sehr kompliziert werden, wenn Sie mit einer großen Anzahl von Formularelementen zu tun haben, von denen jedes eine eigene benutzerdefinierte Fehlermeldung erfordert. Um den Aufwand zu lindern, fügt Angular 1.3 ein neues Modul namens ngMessages hinzu, um Entwicklern die einfache Validierung von Formularen zu erleichtern.

Mit dem

ngMessages-Modul können Sie Benutzern benutzerdefinierte Fehlermeldungen anzeigen, ohne doppelten Code schreiben zu müssen. In diesem Tutorial erfahren Sie, wie Sie dieses Modul zur Validierung Ihrer Formulare verwenden. Außerdem erfahren Sie, wie Sie Fehlermeldungen extern laden und Meldungen nur dann anzeigen, wenn sie tatsächlich benötigt werden.

Ein einfaches Beispiel

Lassen Sie uns zunächst ein einzelnes Eingabefeld mit oder ohne Hilfe von ngMessages validieren, um den Nutzen dieses Moduls zu verstehen. Ohne die Verwendung von ngMessages würde das Markup des Eingabeelements wie der folgende Code aussehen:

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputname" ng-minlength="6" ng-maxlength="12" required>
    <p ng-show="formValidation.username.$error.minlength">Username should have at least 6 characters.</p>
    <p ng-show="formValidation.username.$error.maxlength">Username should have at most 12 characters.</p>
    <p ng-show="formValidation.username.$error.required">Providing a username is mandatory.</p>

</form>

Sie benötigen außerdem den folgenden JavaScript-Code:

angular.module('app', []);

Alle anderen Formularelemente erfordern eine ähnliche Validierung. Dadurch wird das Markup sehr repetitiv, was die Fehlerwahrscheinlichkeit erhöht. Wenn Sie sich entscheiden, ngMessages zur Validierung derselben Formulareingabe zu verwenden, sieht das Markup wie der folgende Code aus:

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputname" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.username.$error">
      <p ng-message="minlength">Username should have at least 6 characters.</p>
      <p ng-message="maxlength">Username should have at most 12 characters.</p>
      <p ng-message="required">Providing a username is mandatory.</p>
    </div>

</form>

Der JavaScript-Code lautet nun:

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

Hier verwenden wir ng-messages 指令将错误消息分组在一起。传递给 ng-messages 指令的值遵循以下模式 formName.inputName.$error。在我们的例子中，其计算结果为 formValidation.username.$error.

Ähnlich können Sie auch für alle anderen Felder die Schlüssel abrufen, deren Werte mit der ng-messages 指令的值。 ngMessages 依赖 ngModel 指令公开的 $error 对象来确定是否应在网页上显示或隐藏错误消息。它循环遍历 $error 对象，查找与任何 ng-message-Anweisung übereinstimmen.

Hier ist ein funktionierendes Beispiel, das den obigen Validierungscode in Aktion zeigt:

Bestätigungsformular

In diesem Abschnitt validieren wir ein Formular mit den Feldern Benutzername, Passwort und E-Mail. Das Markup des Formulars sieht wie der folgende Code aus:

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
    <div ng-messages="formValidation.username.$error">
      <p ng-message="minlength">Username should have at least 6 characters.</p>
      <p ng-message="maxlength">Username should have at most 12 characters.</p>
      <p ng-message="required">Providing a username is mandatory.</p>
      <p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
    </div>
    
    <label>Password</label>
    <input type="text" name="userPassword" ng-model="inputPassword" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.userPassword.$error">
      <p ng-message="minlength">Password should have at least 6 characters.</p>
      <p ng-message="maxlength">Password should have at most 12 characters.</p>
      <p ng-message="required">Providing a password is mandatory.</p>
    </div>
    
    <label>Email</label>
    <input type="email" name="userEmail" ng-model="inputEmail" required>
    <div ng-messages="formValidation.userEmail.$error">
      <p ng-message="email">Please enter a valid email address.</p>
      <p ng-message="required">Providing an email is mandatory.</p>
    </div>
</form>

Wie Sie sehen, ist das zur Validierung verschiedener Formularelemente erforderliche Markup sehr ähnlich. Eine wichtige Änderung in diesem Beispiel ist die Hinzufügung von ng-pattern 指令。我们在这里使用的模式确保输入的用户名仅包含字母数字字符和下划线。 w 位于 /^w+$/ zur Darstellung von Wortzeichen wie A-Z, a-z, 0-9 und _.

Sie sollten versuchen, einen anderen Benutzernamen in das Feld „Benutzername“ einzugeben. Nach einer Weile werden Sie feststellen, dass sich das Formular nicht darüber beschwert, dass das Zeichen nicht alphanumerisch ist, wenn Sie ein Zeichen vor den ersten 6 Zeichen oder nach den ersten 12 Zeichen eingeben. Dieses Verhalten ist nicht sehr benutzerfreundlich.

Angenommen, einige Ihrer Benutzer haben Benutzernamen, die mit einem Ausrufezeichen beginnen. Sie müssen warten, bis sie sechs weitere Zeichen eingegeben haben, bevor sie eine Fehlermeldung erhalten, dass nur alphanumerische Zeichen verwendet werden sollen. Es wäre sehr frustrierend, wenn sie ihren Benutzernamen noch einmal von vorne eingeben würden.

Standardmäßig zeigt ngMessages dem Benutzer jeweils nur einen Fehler an. Aus diesem Grund kann die Meldung über ungültige Zeichen erst angezeigt werden, wenn der Benutzer mehr als sechs Zeichen eingibt. Darüber hinaus verwendet ngMessages die Reihenfolge, in der Sie Fehlermeldungen eingeben, als Hinweis, um diese zu priorisieren.

Wenn Sie eine Nachricht mit der Mindestanzahl an Zeichen angeben, bevor ein alphanumerischer Fehler auftritt, wartet ngMessages, bis der Fehler mit der Mindestanzahl an Zeichen behoben ist, bevor der alphanumerische Fehler angezeigt wird.

Dies ist das gleiche Formular, aber die Fehlermeldungen werden in einer anderen Reihenfolge angezeigt.

Sie können ng-messages-multiple auch verwenden, um dem Benutzer alle zutreffenden Fehlermeldungen auf einmal anzuzeigen. Sobald Benutzer jedoch mit der Eingabe in das Eingabefeld beginnen, werden ihnen mehrere Fehlermeldungen angezeigt, die überwältigend sein können.

重用错误消息

我们的标记中仍然有很多重复。如果您想为不同的输入字段显示相同的错误消息，则为每个输入字段重复它是没有意义的。 ngMessages 模块可以帮助您仅编写一次通用错误消息，并在需要时将它们包含在您的表单中。以下是创建向用户显示通用错误消息的表单的标记。

<script type="text/ng-template" id="generic-messages">
    <p ng-message="required">This field is required.</p>
    <p ng-message="minlength">This field is too short.</p>
    <p ng-message="maxlength">This field is too long.</p>
</script>

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
    <div ng-messages="formValidation.username.$error">
      <p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
      <p ng-message="maxlength">Username cannot be longer than 12 characters.</p>
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Password</label>
    <input type="text" name="userPassword" ng-model="inputPassword" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.userPassword.$error">
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Email</label>
    <input type="email" name="userEmail" ng-model="inputEmail" required>
    <div ng-messages="formValidation.userEmail.$error">
      <p ng-message="required">This field is required.</p>
      <p ng-message="email">Please enter a valid email address.</p>
    </div>
</form>

就像前面的情况一样，消息的优先级由其在模板中的位置决定。您还可以通过在各个字段中包含自定义错误消息来覆盖模板中提供的通用消息。还可以使用以下代码从单独的文件加载错误消息：

<div ng-messages="formValidation.userPassword.$error">
    <div ng-messages-include="path/to/generic-messages.html"></div>
</div>

仅在需要时显示错误

您可以通过仅在用户在填写表单时实际出错时显示错误消息，使表单更加用户友好。例如，您可以选择仅在用户实际跳过输入元素时显示必填字段错误。

这可以通过使用 ng-show 或 ng-if 指令以及 $touched 和 $dirty。对于 $touched，一旦输入失去焦点，就会显示错误消息。对于 $dirty，一旦输入无效就会显示错误消息。

<div ng-messages="form.username.$error" ng-if="form.username.$touched">

<div ng-messages="form.username.$error" ng-if="form.username.$dirty">

<div ng-messages="form.username.$error" ng-show="form.username.$touched">

<div ng-messages="form.username.$error" ng-show="form.username.$dirty">

这是显示 $touched 和 $dirty 之间区别的演示。

结论

在本教程中，您了解了使用 ngMessages 验证不同类型表单元素的输入是多么容易。您还学习了如何多次重复使用相同的错误消息以避免重复，以及如何确定不同错误消息的优先级。

您还可以同时使用 ngMessages 和 ngAnimate 来使用自定义动画来显示或隐藏错误消息。有关使用 ngAnimate 模块的教程也将很快在 Envato Tuts+ 上发布。

如果您想与其他读者分享任何提示，或者有任何问题想问，请在评论中告诉我。

Das obige ist der detaillierte Inhalt vonAngularJS-Formularvalidierung mit ngMessages. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!