使用ngMessages进行AngularJS表单验证

最新推荐文章于 2020-09-21 14:58:13 发布

cunjie3951

最新推荐文章于 2020-09-21 14:58:13 发布

阅读量211

点赞数

文章标签： python java linux vue 编程语言 ViewUI

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

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

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

一个基本的例子

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

<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+$/代表像包括AZ，az，0-9和单词字符_。

您应该尝试在用户名字段中输入其他用户名。一段时间后，您会注意到，如果在前六个字符之前或前十二个字符之后键入该字符，则该表单不会抱怨该字符不是字母数字。此行为不是非常用户友好。

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

默认情况下，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 +上发布。

如果您想与其他读者分享一些技巧，或者您想提出任何问题，请在评论中告诉我。

翻译自: https://code.tutsplus.com/tutorials/angularjs-form-validation-with-ngmessages--cms-28590

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用ngMessages进行AngularJS表单验证

几乎每个网站都使用表格来执行不同的任务，例如注册用户或获取他们的联系信息。确保填写表格的用户至少在输入字段中输入有效信息非常重要。还需要向用户显示详细的错误消息，以便他们可以正确填写表单。当您必须处理许多表单元素时，此过程可能会变得非常复杂，每个表单元素都需要自己的自定义错误消息。为了减轻痛苦，Angular 1.3添加了一个名为ngMessages的新模块，以帮助开发人员轻松验证...
复制链接

扫一扫