我们已经讲解能在在表单层面检验的多种类型验证，但个别字段呢？在前面的示例中，我们确保输入字段都是必填字段，username 的最小长度是 4 个。我们还能做什么？表 4-2 包含了 AngularJS 的一些内置验证。
AngularJS 内置的验证器
| 验证器 | 描述 |
|---|---|
| required | 正如前面所讨论的那样，这确保字段是必需的，字段标记为无效，直到填写。 |
| ng-required | 与 required 不同，这标志着字段也是必需的，ng-required 指令允许我们基于控制器布尔条件标记输入字段为必需。 |
| ng-minlength | 该指令可以设定输入文本值的最小长度 |
| ng-maxlength | 该指令可以设定文本输入值的最小长度 |
| ng-pattern | 作为这个指令的一部分，文本输入的有效性可以针对指定的正则表达式模式进行检查。 |
| type="email" | 文本输入内置电子邮件验证。 |
| type="number" | 带有数量验证的文本输入。也可以有最小和最大值的附加属性。 |
| type="date" | 如果浏览器支持，显示一个 HTML 日期选择器。否则，默认为一个文本输入。 |
| ng-model | 绑定到日期对象。预计日期格式为 yyyy-mm-dd（例如 2009-10-24）。 |
| type="url" | 带有输入验证的 URL 文本输入。 |
此外，我们可以编写自己的验证器，我们将在后面章节这个问题。
显示错误消息
我们能用这些验证器做些什么呢？当然可用来检查表单的有效性，并相应地禁用保存或更新按钮。但是我们也要告诉用户错在哪里、如何修正。AngularJS 提供两种方案来解决这个问题：
- 模型准确反映表单错误是什么，我们可以使用它来显示更友好的错误消息。
- 自动从每个字段添加和删除的 CSS 类允许我们的突出表单错误。
首先让我们看一看如何根据错误对象显示特定的错误消息，看下面的例子：
<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit()" name="myForm">
<input type="text"
name="uname"
ng-model="ctrl.user.username"
required
ng-minlength="4">
<span ng-show="myForm.uname.$error.required">
This is a required field
</span>
<span ng-show="myForm.uname.$error.minlength">
Minimum length required is 4
</span>
<span ng-show="myForm.uname.$invalid">
This field is invalid
</span>
<input type="password"
name="pwd"
ng-model="ctrl.user.password"
required>
<span ng-show="myForm.pwd.$error.required">
This is a required field
</span>
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid">
</form>
<script src="https://cdn.jsdelivr.net/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function() {
var self = this;
self.submit = function() {
console.log('User clicked submit with ', self.user);
};
}]);
</script>
</body>
</html>在本例中控制器中没有做任何改变。相反，我们可以只需要关注表单的 HTML。让我们看看表单改变子什么：
- 首先，我们为需要验证的两个输入字段添加了
name属性，用户名文本命名为uname，pwd密码文本命名为pwd。 - 然后使用 AngularJS 的表单绑定能够为每个表单字段找出错误。当我们为任何输入表单添加 name 属性时，实际上专门为它创建了带有错误状态的模型。
- 所以对于用户名字段，我们可以通过访问
myForm.uname$error.required来检验它有没有填写。同样对于ng-minlength，字段应该是myForm.uname.$error.minlength。对于密码，我们通过myForm.pwd.$error.required来检验该字段是否填写。 - 类似于表单，我们也通过
myForm.uname.$invalid访问输入状态。我们早些时候讲述的其他所有表单状态（$valid、 $pristine 和$dirty）也同样适用于myForm.uname对象。
通过模型，现在只有当某种类型的错误触发时才显示一个错误消息。上表中的每一个验证器公开了错误对象的相应键。因此，我们可以把它找到并将特定的错误消息显示给用户。需要显示给用户名那个字段是必需的吗？然后当用户开始打字时，显示了输入的最小长度，最后当输入超过最大长度时显示一条消息。所有这些类型的条件信息都可以使用 AngularJS 验证器来显示。
为表单和状态设置样式
我们看到了各种状态的形式(输入)：$dirty、$valid 等。我们看到如何根据这些条件显示特定的错误消息和禁用按钮，但是如果我们想使用用户界面和 CSS 强调某些输入字段或表单状态呢？一种选择是与 ng-class 指令一起使用表单和输入状态，比如 myForm.$dirty 为真时添加 dirty 类。但 AngularJS 提供了一个更容易的选择。
对于每个我们上文描述状态，AngularJS 为表单和输入元素来回添加和删除 CSS 类，如表 4-3 所示。
表单状态 CSS 类表
| 表单状态 | 应用的 CSS 类 |
|---|---|
| $invalid | ng-invalid |
| $valid | ng-valid |
| $pristine | ng-pristine |
| $dirty | ng-dirty |
同样，对于每个添加到输入字段的验证器，我们也可以用类似的命名方式的 CSS 类，如下表 4-4 所示。
输入状态 CSS 类表
| 输入状态 | 应用的 CSS 类 |
|---|---|
| $invalid | ng-invalid |
| $valid | ng-valid |
| $pristine | ng-pristine |
| $dirty | ng-dirty |
| required | ng-valid-required 或 ng-invalid-required |
| min | ng-valid-min 或 ng-invalid-min |
| max | ng-valid-max 或 ng-invalid-max |
| pattern | ng-valid-pattern 或 ng-invalid-pattern |
| url | ng-valid-url 或 ng-invalid-url |
| ng-valid-email 或 ng-invalid-email | |
| date | ng-valid-date 或 ng-invalid-date |
| number | ng-valid-number or ng-invalid-number |
除了基本的输入状态，AngularJS 还需要验证器的名称（数量，最大长度、模式等），根据特定的验证器是否满足需求，相应添加 ng-valid-validator_name 或 ng-invalid-validator_name 类。
让我们看一个可以以不同的方式来强调输入的示例：
在这个例子中，我们保留子现有的验证器功能，虽然我们移除特定的错误消息。相反，我们试图做的是使用 CSS 的类标出所需字段。这是完成的示例：
- 正确填写字段时，输入框变绿色。这是当 CSS 类
ng-valid应用于我们的输入字段时通过设置背景颜色来完成的。 - 如果用户开始输入时我们要显示深红色背景，然后撤销它。也就是说，我们要将背景设置为红色，标记为必需的字段，但只有在用户修改字段后。所以我们设置背景颜色是红色的，如果应用
CSS 类 ng-dirty（标识用户已修改）ng-invalid-minlength（标识用户没有输入足够数量的字符）。
类似地，如果字段是必需的但不是脏的，您可以添加一个 CSS 类用红色 * 来显示。从头开始使用这些 CSS 类的组合(表单和输入状态)，您可以轻松使用样式，将所有相关的、可操作的用户界面呈现给用户。
评论 (0)