AngularJS入门教程之表单校验用法示例

AngularJS是一款非常流行的前端JavaScript框架，它为Web应用程序提供了许多现代化且强大的功能，其中包括表单校验。本文将介绍如何使用AngularJS来实现表单校验，并提供两个示例供参考。

目录

• AngularJS表单校验介绍
• AngularJS表单校验示例
• 自定义校验器
• 结论

AngularJS表单校验介绍

AngularJS提供了内置的表单校验器，它使用一个指令来实现表单校验。在HTML中，只需将ng-app指令添加到body标签中，并在表单元素中添加ng-form指令即可开启表单校验功能。然后使用AngularJS内置的校验指令，如ng-required，ng-minlength等即可完成对表单的校验。

AngularJS表单校验示例

基本示例

下面是一个基本的表单校验示例，它将展示如何使用AngularJS的内置指令来实现表单校验。

<div ng-app="myApp" ng-controller="myCtrl">
  <form name="myForm" ng-submit="submitForm()">
    <label for="name">Name:</label>
    <input type="text" name="name" ng-model="name" ng-required="true" />

    <label for="email">Email:</label>
    <input type="email" name="email" ng-model="email" ng-required="true" />

    <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
  </form>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.submitForm = function() {
      alert('Form submitted successfully!');
    }
  });
</script>

在以上示例中，我们使用了AngularJS的ng-required指令来标记表单字段为必填项，添加ng-disabled指令来设置提交按钮在表单校验失败时禁用。同时，我们在表单中添加了一个ng-submit指令，当表单被提交时，会调用我们在控制器中定义的submitForm函数。

高级示例

以上示例展示了一些简单的校验方法，但在实际项目开发中，我们通常需要更加复杂的校验规则。下面的示例将展示如何使用自定义指令来实现自定义表单校验。

<div ng-app="myApp" ng-controller="myCtrl">
  <form name="myForm" ng-submit="submitForm()">
    <label for="phoneNumber">Phone number:</label>
    <input type="tel" name="phoneNumber" ng-model="phoneNumber" validate-phone-number />

    <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
  </form>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.submitForm = function() {
      alert('Form submitted successfully!');
    }
  });

  app.directive('validatePhoneNumber', function() {
    var PHONE_REGEX = /^(1-)?\d{3}-\d{3}-\d{4}$/;

    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$validators.phoneNumber = function(value) {
          return PHONE_REGEX.test(value);
        }
      }
    }
  });
</script>

在以上示例中，我们创建了一个名为'validatePhoneNumber'的自定义指令，在指令中定义了一个正则表达式变量，以对电话号码进行验证。然后，我们在指令中使用了ngModelController的$validators属性来添加了一个phoneNumber验证器，它验证了表单元素的值是否符合正则表达式。

自定义校验器

对于一些复杂的校验逻辑，通常需要使用自定义校验器来实现自定义的表单校验规则。下面是一个自定义校验器示例：

<div ng-app="myApp" ng-controller="myCtrl">
  <form name="myForm" ng-submit="submitForm()">
    <label for="password">Password:</label>
    <input type="password" name="password" ng-model="password" validate-password />

    <label for="confirmPassword">Confirm password:</label>
    <input type="password" name="confirmPassword" ng-model="confirmPassword" validate-confirm-password />

    <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
  </form>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.submitForm = function() {
      alert('Form submitted successfully!');
    }
  });

  app.directive('validatePassword', function() {
    var MIN_PASSWORD_LENGTH = 8;
    var PASS_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$validators.password = function(value) {
          if (value) {
            if (value.length < MIN_PASSWORD_LENGTH) {
              return false;
            }

            return PASS_REGEX.test(value);
          }

          return true;
        }
      }
    }
  });

  app.directive('validateConfirmPassword', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$validators.confirmPassword = function(value) {
          return value === scope.myForm.password.$viewValue;
        }
      }
    }
  });
</script>

在以上示例中，我们添加了两个验证器，一个是validate-password指令，用于验证密码的复杂度和长度，另一个是validate-confirm-password指令，用于验证密码是否和确认密码一致。在validate-password指令中，我们使用了ngModelController的$validators属性来添加了一个password验证器，它验证了表单元素的值是否符合密码复杂度和长度要求。在validate-confirm-password指令中，我们使用了$scope.myForm的方式来获取到密码输入框的值，然后判断确认密码是否和密码输入框的值一致。

结论

在这篇入门教程中，我们介绍了AngularJS的表单校验功能，并提供了两个示例来展示如何使用内置指令和自定义指令来实现表单校验。如果您想深入学习AngularJS，建议查看官方文档并使用在线编译器实现实验。