有效地处理表单验证：使用 AngularJS 中的 $validators-JavaScript中文网-JavaScript教程资源分享门户

表单验证是网站开发中非常重要的一部分，它是确保用户输入的数据符合预期格式的一种方式。在传统的网页开发中，表单验证通常是通过 JavaScript 和 jQuery 实现的。但是，随着现代网站变得更加复杂和交互性更强，使用 AngularJS 中的 $validators 是一种更好的方法，它可以大大简化表单验证的代码并提供更好的用户体验。在这篇文章中，我们将详细介绍如何使用 AngularJS 中的 $validators 来有效地处理表单验证。

使用 $validators

$validators 是 AngularJS 1 提供的一种表单验证方式，它是在表单控制器中定义的一组验证函数。$validators 可以使开发人员轻松地定义和使用自定义表单验证规则。在表单控制器中，我们可以使用 $validators 对于每一个表单控件都定义多个函数，这些函数接收控件的 $modelValue 和 $viewValue 作为输入参数，返回 true 或 false 来指示输入是否有效。下面是一个示例：

-- -------------------- ---- -------
--- ------ - ------------------------ ----
--------------------------------- ---------------- -
 
  -- ------ - ------ ---------
  -------------------- - --------------- -
    ------ --------------------------------------------
  -
 
---

在上面的示例中，我们在控制器中定义了一个名称为 validateEmail 的自定义验证器，它检查输入的值是否是有效的电子邮件地址。

接下来，在 HTML 中，我们可以将这个自定义验证器应用到表单中的一个控件上：

<form name="myForm">
  <input type="email" name="emailAddress" ng-model="emailAddress" required
         ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" validate-email>
  <button ng-disabled="myForm.$invalid">Submit</button>
</form>

在上面的示例中，我们使用了 AngularJS 的 ng-model 指令来绑定输入框的值到控制器中的 $scope.emailAddress。我们还在 ng-pattern 指令中定义了一个正则表达式，它检查输入的值是否是有效的电子邮件地址。在 validate-email 指令中，我们将我们自定义的验证器应用到输入框中。

这样，当用户输入一个无效的电子邮件地址时，表单中的该控件将标记为无效，并且禁用提交按钮。现在让我们深入了解 $validators 中的一些高级用法。

高级用法

支持异步验证

$validators 还支持异步验证规则，这对于涉及服务器交互或者需要等待异步操作完成的表单验证非常有用。

下面是一个示例，我们来修改前面 validateEmail 函数的定义，将它变成一个异步函数：

$scope.validateEmail = function(value) {
  return $http.get('/validate-email', {params: {email: value}}).then(function() {
    return true;
  }, function() {
    return false;
  });
}

在上面的示例中，我们使用 $http 服务向服务器发送一个异步请求，并在请求成功或失败时返回 true 或 false。我们可以像前面一样在我们的 HTML 模板中使用 validate-email 指令来应用这个规则，就像这样：

<form name="myForm">
  <input type="email" name="emailAddress" ng-model="emailAddress" required
         ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" validate-email async>
  <button ng-disabled="myForm.$invalid">Submit</button>
</form>

在这里，我们在 validate-email 指令上加上 async，AngularJS 将知道这是个异步的验证规则，并在等待异步操作完成后再显示验证结果。

支持多字段验证

有时我们需要对多个字段进行验证，例如确认密码字段必须与密码字段相同。在这种情况下，我们可以使用一个 $validators 返回一个包含多个验证规则的对象。

下面是一个示例，我们来定义一个验证规则，检查两个输入框的值是否相同：

$scope.compareFields = function(field1, field2) {
  return {
    isValid: function() {
      return field1.$modelValue === field2.$modelValue;
    },
    watchFields: [field1, field2]
  };
}

在上面的示例中，我们定义了一个 compareFields 函数，它接收两个表单控件作为参数。isValid 函数用于检查两个控件的值是否相同，并返回 true 或 false。我们还定义了一个名为 watchFields 的属性，其中包含这些控件，以便当这些控件值发生变化时，AngularJS 可以及时更新验证结果。

现在让我们在 HTML 中使用这个规则：

<form name="myForm">
  <input type="password" name="password" ng-model="password" required>
  <input type="password" name="confirmPassword" ng-model="confirmPassword" required
         compare-fields="{{password}}:{{confirmPassword}}"
         ng-disabled="!myForm.password.$valid || !myForm.confirmPassword.$valid || !myForm.confirmPassword.validations.compareFields">
  <button ng-disabled="myForm.$invalid">Submit</button>
</form>

在上面的示例中，我们将 compare-fields 指令应用到 confirmPassword 控件上。这个指令的参数值是一个字符串，用冒号分隔两个控件的名称，即密码和确认密码字段。当这两个字段的值不同时，confirmPassword 控件将被标记为无效，并禁用提交按钮。

结论

在这篇文章中，我们介绍了如何使用 AngularJS 中的 $validators 来有效地处理表单验证。$validators 提供了一种方便的方式来定义自定义表单验证规则，支持异步验证和多字段验证。这样可以使开发人员更轻松地实现表单验证功能，从而提高用户体验，并确保输入数据的有效性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67723ee46d66e0f9aad624d5