AngularJS 实现的 Form 表单元素验证-JavaScript中文网-JavaScript教程资源分享门户

前言

表单是 Web 应用程序中最常见的交互元素之一，它允许用户向应用程序提交数据。在前端开发中，表单验证是一个重要的环节，它可以确保用户输入的数据是有效的、正确的。AngularJS 是一个流行的前端框架，它提供了一种方便的方式来实现表单验证。

在本文中，我们将探讨 AngularJS 如何实现表单元素验证，并提供示例代码和指导意义。

AngularJS 表单验证

AngularJS 提供了一种方便的方式来实现表单验证，它使用指令来管理表单元素。指令是一种 AngularJS 组件，它允许我们将逻辑和行为添加到 HTML 元素中。对于表单验证，AngularJS 提供了一些内置指令，如 ngModel、ngRequired、ngMinlength 等。

ngModel 指令

ngModel 指令是 AngularJS 表单验证中最重要的指令之一，它允许我们将表单元素的值绑定到作用域中的变量上。例如，我们可以将一个文本框的值绑定到作用域中的一个变量上，如下所示：

<input type="text" ng-model="name">

在上面的代码中，ng-model 指令将文本框的值绑定到作用域中的 name 变量上。每当用户输入文本框中的值时，name 变量的值也会相应地更新。

ngRequired 指令

ngRequired 指令用于指定表单元素是否为必填项。如果一个表单元素被标记为必填项，但用户未填写该元素，则表单验证将失败。

<input type="text" ng-model="name" ng-required="true">

在上面的代码中，ng-required 指令将文本框标记为必填项。如果用户未填写该文本框，则表单验证将失败。

ngMinlength 和 ngMaxlength 指令

ngMinlength 和 ngMaxlength 指令用于指定表单元素的最小和最大长度。如果用户输入的值不符合指定的长度要求，则表单验证将失败。

<input type="text" ng-model="name" ng-minlength="3" ng-maxlength="10">

在上面的代码中，ng-minlength 和 ng-maxlength 指令将文本框的最小长度设置为 3，最大长度设置为 10。如果用户输入的值不符合这个范围，则表单验证将失败。

自定义验证器

除了内置的指令外，AngularJS 还允许我们创建自定义指令来实现特定的表单验证逻辑。例如，我们可以创建一个自定义指令来验证邮件地址是否有效。

// www.javascriptcn.com code example
app.directive('validEmail', function() {
  var EMAIL_REGEXP = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.validEmail = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          return true;
        }
        if (EMAIL_REGEXP.test(viewValue)) {
          return true;
        }
        return false;
      };
    }
  };
});

在上面的代码中，我们创建了一个名为 validEmail 的自定义指令。该指令使用正则表达式验证邮件地址是否有效。我们将该指令添加到一个文本框中，如下所示：

<input type="email" ng-model="email" valid-email>

在上面的代码中，我们将 valid-email 指令添加到一个文本框中。该指令将验证文本框中的值是否为有效的邮件地址。

示例代码

下面是一个完整的示例代码，它演示了如何使用 AngularJS 实现表单元素验证：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>AngularJS Form Validation</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script>
    var app = angular.module('myApp', []);
    app.directive('validEmail', function() {
      var EMAIL_REGEXP = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
          ctrl.$validators.validEmail = function(modelValue, viewValue) {
            if (ctrl.$isEmpty(modelValue)) {
              return true;
            }
            if (EMAIL_REGEXP.test(viewValue)) {
              return true;
            }
            return false;
          };
        }
      };
    });
  </script>
</head>

<body>
  <h1>AngularJS Form Validation</h1>
  <form name="myForm" novalidate>
    <label>Name:</label>
    <input type="text" ng-model="name" ng-required="true" ng-minlength="3" ng-maxlength="10">
    <div ng-show="myForm.name.$dirty && myForm.name.$invalid">
      <span ng-show="myForm.name.$error.required">Name is required.</span>
      <span ng-show="myForm.name.$error.minlength">Name must be at least 3 characters long.</span>
      <span ng-show="myForm.name.$error.maxlength">Name cannot be more than 10 characters long.</span>
    </div>
    <br>
    <label>Email:</label>
    <input type="email" ng-model="email" ng-required="true" valid-email>
    <div ng-show="myForm.email.$dirty && myForm.email.$invalid">
      <span ng-show="myForm.email.$error.required">Email is required.</span>
      <span ng-show="myForm.email.$error.validEmail">Email is not valid.</span>
    </div>
    <br>
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
  </form>
</body>

</html>

在上面的示例代码中，我们创建了一个表单，它包含两个表单元素：一个文本框和一个邮件地址输入框。我们使用内置指令 ng-required、ng-minlength、ng-maxlength 和自定义指令 valid-email 来实现表单元素的验证。在表单中，我们使用了 ng-show 指令来显示错误消息，如果表单元素验证失败，则显示相应的错误消息。最后，我们使用 ng-disabled 指令来禁用提交按钮，如果表单验证失败，则禁用该按钮。

指导意义

AngularJS 提供了一种方便的方式来实现表单元素验证。通过使用内置指令和自定义指令，我们可以轻松地实现各种表单元素的验证逻辑。在开发过程中，我们应该始终注意表单元素的验证，以确保用户输入的数据是有效的、正确的。同时，我们应该尽量减少表单验证的复杂性，以提高用户体验。

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

AngularJS 实现的 Form 表单元素验证

前言