AngularJS表单验证与ngMessages

几乎每个网站都使用表单来执行不同的任务，例如注册用户或获取他们的联系信息。确保填写表单的用户至少在输入字段中输入了有效信息，这一点非常重要。

还需要向用户显示详细的错误消息，以便他们正确填写表格。当您必须处理大量表单元素时，此过程可能会变得非常复杂，每个元素都需要自己的自定义错误消息。为了减轻痛苦，angular 1.3 添加了一个名为ngMessages的新模块，以帮助开发人员轻松验证表单。

ngMessages 模块使您能够向用户显示自定义错误消息，而无需编写重复的代码。在本教程中，您将学习如何使用此模块来验证您的表单。您还将学习如何在外部加载错误消息并仅在实际需要时才显示这些消息。

一个基本的例子

让我们首先在有和没有 ngMessages 帮助的情况下验证单个输入字段，看看这个模块的用处。如果不使用 ngMessages，输入元素的标记将类似于以下代码：

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

您还需要以下javascript代码：

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

所有其他表单元素都需要进行类似的验证。这将使标记非常重复，增加出错的机会。如果您决定使用 ngMessages 来验证相同的表单输入，则标记看起来类似于以下代码：

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

JavaScript 代码现在将变为：

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

在这里，我们使用ng-messages指令将错误消息组合在一起。传递给ng-messages指令的值遵循模式 formName.inputName.$error。在我们的例子中，这计算为 formValidation.username.$error。

同样，您也可以获取ng-messages所有其他字段的指令值。ngMessages依赖于ngModel$error指令公开的对象来确定是否应该在网页上显示或隐藏错误消息。它循环遍历对象，寻找与任何指令的值匹配的键。$errorng-message

这是一个工作示例，显示了上述验证代码的实际效果：

See the Pen AngularJS Input Field Validation - ngMessages by Monty (@Shokeen) on CodePen.

验证表单

在本节中，我们将使用用户名、密码和电子邮件字段验证表单。表单的标记将类似于以下代码：

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

如您所见，验证不同表单元素所需的标记非常相似。在这种情况下，一个重要的变化是添加了ng-pattern指令。我们在这里使用的模式确保输入的用户名只有字母数字字符和下划线。\win /^\w+$/ 代表单词字符，如 AZ、az、0-9 和 _ 。

See the Pen AngularJS Form Validation - ngMessages by Monty (@Shokeen) on CodePen.

您应该尝试在用户名字段中输入不同的用户名。一段时间后，您会注意到如果在前 6 个字符之前或在前 12 个字符之后键入的字符不是字母数字，则表单不会抱怨该字符。这种行为对用户不是很友好。

例如，假设您的一些用户的用户名以感叹号开头。他们将不得不等到他们再输入六个字符才能得到关于仅使用字母数字字符的错误。从头开始再次输入用户名会让他们非常沮丧。

默认情况下，ngMessages 一次只向用户显示一个错误。这就是为什么在用户输入超过六个字符之前无法显示有关无效字符的消息的原因。此外，ngMessages 使用您输入错误消息的顺序作为提示来确定它们的优先级。

如果您在字母数字错误之前提供了最小字符消息，则 ngMessages 将等到最小字符错误已解决，然后才会显示字母数字错误。

这是相同的表单，错误消息以不同的顺序显示。

See the Pen AngularJS Form Validation - ngMessages (Message Order) by Monty (@Shokeen) on CodePen.

您还可以使用 ng-messages-multiple. 但是，一旦用户开始在输入字段中输入，就会看到多条错误消息，这会让他们不知所措。

重用错误消息

我们的标记中仍然有很多重复。如果您想为不同的输入字段显示相同的错误消息，那么为每个输入字段重复它是没有意义的。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>

See the Pen AngularJS Form Validation - Reusing Error Messages by Monty (@Shokeen) on CodePen.

仅在需要时显示错误

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

这可以通过使用ng-showor ng-if指令和$touchedand来实现$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。

See the Pen AngularJS Form Validation - Showing Messages When Required by Monty (@Shokeen) on CodePen.