在 AngularJS 中添加自定义表单验证

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

在 AngularJS 中添加自定义表单验证

作者：迹忆客最近更新：2023/04/12 浏览次数：

验证是扫描输入数据正确性的过程，通常用于纠错或数据一致性。 AngularJS 自定义验证是一个强大的库，允许开发人员创建自定义验证规则。

在本文中，我们将讨论有关 AngularJS 自定义验证的所有内容。让我们从表单验证器开始。

AngularJS 中的表单验证器

Angular 支持两种基本形式。

模板驱动的表单
反应形式

模板驱动的表单提供了一种声明式的、易于使用的、经过良好测试的方式来创建表单。这是 Angular 中的默认形式。

反应式表单是一种更底层的 API，可让您更好地控制表单的行为。它旨在使用响应式数据源，例如可观察对象或事件发射器。

表单中的每个字段都可以用作 FormControl，返回有关该字段的特定信息，例如表单是否有效、实际字段值和其他详细信息。

AngularJS 中的自定义验证器

Angular 有一个用于验证数据的内置系统，称为 Validator API。但是，当涉及到更复杂的验证规则或验证规则特定于您的应用程序时，您可以使用自定义验证器。

Angular 中的自定义验证器非常有用，因为它们允许开发人员在不依赖外部库的情况下创建自己的验证规则。它们还使开发人员可以更直接地将验证逻辑扩展到 Angular 和其他应用程序部分之外。

重要的是要注意 AngularJS 自定义验证可以与任何其他验证库一起使用，例如 jQuery，但这不是必需的。

在 AngularJS 中创建或添加自定义表单验证的步骤

以下步骤将指导您创建 AngularJS 自定义表单验证。

创建一个新的 AngularJS 项目。
在我们的 index.html 文件中包含 ng-bootstrap CSS 文件。
将 ng-bootstrap JavaScript 文件添加到我们的 index.html 文件中。
在 HTML 页面中创建一个带有输入字段的自定义表单，并将其包含在 index.html 的正文部分中。
创建一个 Angular 控制器并将其添加到 index.html。
创建一个 Angular 表单指令并将其添加到 index.html。
将表单控制器注入我们的角度控制器。

让我们讨论 AngularJS 中自定义表单验证的示例。

HTML 代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
          <script src="app.js"></script>
</head>
<body ng-app="FormValidationExample">
  <div ng-controller="ctrlForm">
  <form name="myForm" novalidate>
    <div class="input-item">
      <label for="txtEmail">Your email</label><br>
      <input type="email" name="email" id="txtEmail" class="text-box" ng-model="email" required custom-focus />
      <div class="error-wrapper" ng-show="myForm.email.$dirty && myForm.email.$invalid && !myForm.email.$focused">
        <span ng-show="myForm.email.$error.required">Email is required</span>
        <span ng-show="myForm.email.$error.email">Please enter a valid email address</span>
      </div>
    </div>
  <input type="submit" value="Submit" ng-disabled="myForm.$invalid" />
  </form>
</div>
</body>
</html>

JavaScript 代码:

  angular.module('FormValidationExample', [])
    .controller('ctrlForm', ['$scope', function($scope) {
      $scope.checkboxes_motives = { 'checked': false, items: {} };
      $scope.choices = ['work', 'play'];
      $scope.selectAllMotives = function(value) {
        angular.forEach($scope.choices, function (motive) {
          $scope.checkboxes_motives.items[motive] = value;
        });
      };
    }])
    .directive('customFocus', [function() {
      var FOCUS_CLASS = "custom-focused";
      return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
          ctrl.$focused = false;
          element.bind('focus', function(evt) {
            element.addClass(FOCUS_CLASS);
            scope.$apply(function() {ctrl.$focused = true;});
          }).bind('blur', function(evt) {
            element.removeClass(FOCUS_CLASS);
            scope.$apply(function() {ctrl.$focused = false;});
          });
        }
      }
}]);