AngularJS是一款非常流行的前端JavaScript框架，它为Web应用程序提供了许多现代化且强大的功能，其中包括表单校验。本文将介绍如何使用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的方式来获取到密码输入框的值，然后判断确认密码是否和密码输入框的值一致。