学习angularjs客户端表单验证

教程来源：http://www.tuicool.com/articles/2Qbiqi
每天学习一点知识：
客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。
在AngularJS中，有许多表单验证指令。在这里，我们将谈谈几个最流行指令：
所有输入字段可以进行一些基本的验证，例如最小长度，最大长度，等等，这些都是HTML5标签的属性验证
ng-minlength：
ng-maxlength：
ng-pattern：
ng-model:

H5表单验证
<input type="text" required />
<input type="text" ng-minlength=5 ng-maxlength=20 />
<input type="text" ng-pattern="/a-zA-Z/" />
<input type="email" name="email" ng-model="user.email" />
<input type="number" name="email" ng-model="user.age" />
<input type="url" name="homepage" ng-model="user.facebook_url" />

关于自定义验证
自定义验证--我们将实现一个指令，指令名：ensureUnique
AngularJS可以很容易的使用指令来添加自定义验证。
例如，我们要验证我们的用户名是可用的（在数据库中不重复）。要做到这一点，我们将实现一个指令，它在输入字符变化时触发一个Ajax请求：
var app = angular.module('validationExample', []);
app.directive('ensureUnique', ['$http', function($http) {
  return {
    require: 'ngModel',
    link: function(scope, ele, attrs, c) {
      scope.$watch(attrs.ngModel, function() {
        $http({
          method: 'POST',
          url: '/api/check/' + attrs.ensureUnique,
          data: {'field': attrs.ensureUnique}
        }).success(function(data, status, headers, cfg) {
          c.$setValidity('unique', data.isUnique);
        }).error(function(data, status, headers, cfg) {
          c.$setValidity('unique', false);
        });
      });
    }
  }
}]);