使用ngMessages进行AngularJS表单验证

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

还需要向用户显示详细的错误消息，以便他们能够正确填写表单。当您必须处理大量表单元素时，这个过程可能会变得非常复杂，每个表单元素都需要自己的自定义错误消息。为了减轻痛苦，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 对象来确定是否应在网页上显示或隐藏错误消息。它循环遍历 $error 对象，查找与任何 ng-message 指令的值匹配的键。

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

验证表单

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

<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 指令。我们在这里使用的模式确保输入的用户名仅包含字母数字字符和下划线。 w 位于 /^w+$/ 代表单词字符，例如 A-Z、a-z、0-9 和 _。

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

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

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

如果您在出现字母数字错误之前提供了最小字符消息，ngMessages 将等到最小字符错误解决后再显示字母数字错误。

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

您还可以使用 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>

仅在需要时显示错误

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

这可以通过使用 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+ 上发布。

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

以上是使用ngMessages进行AngularJS表单验证的详细内容。更多信息请关注PHP中文网其他相关文章！