AngularJS 输入验证详解及实例代码

AngularJS作为一款流行的前端框架，在输入验证方面提供了很多方便易用的特性。本文将详细讲解AngularJS数据绑定的输入验证机制，包括常用的验证指令以及自定义验证函数的实现方式，并提供两个示例说明。

常用的验证指令

1. required：表示输入不能为空，使用时直接在HTML中添加该指令即可，例如：

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

1. ng-pattern：表示输入必须满足指定的正则表达式，例如：

<input type="text" ng-model="postalCode" ng-pattern="/^[0-9]{6}$/">

1. ng-minlength：表示输入的字符长度必须满足指定的最小值，例如：

<input type="text" ng-model="password" ng-minlength="6">

1. ng-maxlength：表示输入的字符长度必须满足指定的最大值，例如：

<input type="text" ng-model="username" ng-maxlength="10">

1. ng-pattern：自定义正则表达式验证。比如：

<input type="text" ng-model="website" ng-pattern="/^https?:\/\/(www\.)?.+\..+$/">

自定义验证函数

在涉及到一些比较复杂的验证逻辑时，可以使用自定义验证函数来实现。AngularJS提供了一个内置的验证指令ng-model，可以使用$validators对象来添加自定义验证函数。例如：

<form name="myForm">
  <label>
    Password:
    <input type="password" name="password" ng-model="user.password" required minlength="8" my-custom-validation>
  </label>
  <div ng-messages="myForm.password.$error">
    <div ng-message="required">This field is required</div>
    <div ng-message="minlength">Password must be at least 8 characters long</div>
    <div ng-message="myCustomValidation">Password must contain both uppercase and lowercase letters, and at least one number</div>
  </div>
</form>

app.directive('myCustomValidation', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      ngModel.$validators.myCustomValidation = function(value) {
        var uppercaseRegex = /[A-Z]/g;
        var lowercaseRegex = /[a-z]/g;
        var numberRegex = /[0-9]/g;

        if (!uppercaseRegex.test(value)) {
          return false;
        }

        if (!lowercaseRegex.test(value)) {
          return false;
        }

        if (!numberRegex.test(value)) {
          return false;
        }

        return true;
      };
    }
  };
});

示例1：验证密码和确认密码是否匹配

在进行注册等操作时，通常需要用户输入密码和确认密码两次，然后验证两次输入是否匹配。下面是一个简单的示例代码：

<form name="myForm">
  <label>
    Password:
    <input type="password" name="password" ng-model="user.password" required minlength="8">
  </label>
  <label>
    Confirm Password:
    <input type="password" name="confirmPassword" ng-model="user.confirmPassword" required minlength="8" match-password="user.password">
  </label>
  <div ng-messages="myForm.confirmPassword.$error">
    <div ng-message="required">This field is required</div>
    <div ng-message="minlength">Password must be at least 8 characters long</div>
    <div ng-message="matchPassword">Passwords do not match</div>
  </div>
</form>

app.directive('matchPassword', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      ngModel.$validators.matchPassword = function(value) {
        return value === scope.$eval(attr.matchPassword);
      };

      scope.$watch(attr.matchPassword, function() {
        ngModel.$validate();
      });
    }
  };
});

示例2：验证两个时间段的大小关系

在时间段的选择中，通常需要验证两个时间段的大小关系，例如选定一个起始日期和结束日期，结束日期必须晚于起始日期。下面是一个简单的示例代码：

<form name="myForm">
  <label>
    Start Date:
    <input type="date" name="startDate" ng-model="startDate" required>
  </label>
  <label>
    End Date:
    <input type="date" name="endDate" ng-model="endDate" required greater-than="startDate">
  </label>
  <div ng-messages="myForm.endDate.$error">
    <div ng-message="required">This field is required</div>
    <div ng-message="greaterThan">End Date must be later than Start Date</div>
  </div>
</form>

app.directive('greaterThan', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      ngModel.$validators.greaterThan = function(value) {
        return value > scope.$eval(attr.greaterThan);
      };

      scope.$watch(attr.greaterThan, function() {
        ngModel.$validate();
      });
    }
  };
});

以上是AngularJS输入验证的详细攻略，包括常用的验证指令及自定义验证函数的实现方式，并且提供了两个示例代码。