使用ngMessages进行AngularJS表单验证

王林

发布时间：2023-09-01 22:05:14

932人浏览过

来源于php中文网

原创

使用ngmessages进行angularjs表单验证

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

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

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

一个基本示例

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



    Username
    
    Username should have at least 6 characters.
    Username should have at most 12 characters.
    Providing a username is mandatory.

您还需要以下 JavaScript 代码：

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

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



    Username
    
    
      Username should have at least 6 characters.
      Username should have at most 12 characters.
      Providing a username is mandatory.

JavaScript 代码现在将变为：

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

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

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

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

验证表单

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



    Username
    
    
      Username should have at least 6 characters.
      Username should have at most 12 characters.
      Providing a username is mandatory.
      Username can only be alphanumeric with an optional underscore.
    
    
    Password
    
    
      Password should have at least 6 characters.
      Password should have at most 12 characters.
      Providing a password is mandatory.
    
    
    Email
    
    
      Please enter a valid email address.
      Providing an email is mandatory.

正如您所看到的，验证不同表单元素所需的标记非常相似。本例中的一个重要变化是添加了 ng-pattern 指令。我们在这里使用的模式确保输入的用户名仅包含字母数字字符和下划线。 \w 位于 /^\w+$/ 代表单词字符，例如 A-Z、a-z、0-9 和 _。

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

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

jQuery带验证登录表单插件

jQuery带验证登录表单插件是可以对一些注册登录时常用的字段类型进行简单的验证，另外我们可以在同一个页面切换并完成注册或者登录操作。

下载

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

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

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

您还可以使用 ng-messages-multiple 一次性向用户显示所有适用的错误消息。然而，一旦用户开始在输入字段中输入内容，就会看到多条错误消息，这可能会让他们不知所措。

重用错误消息

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





    Username
    
    
      Username can only be alphanumeric with an optional underscore.
      Username cannot be longer than 12 characters.
      
    

    Password
    
    
      
    

    Email
    
    
      This field is required.
      Please enter a valid email address.