AngularJS表单验证中级篇（3）

  {{form.$invalid}}
  {{form.$valid}}
  {{form.$dirty}}
  {{form.$pristine}}
  
  
  
  
  
  
  

    重置
    提交
  

  {{form.user.$error.required&＃63;'user该项必填':''}}
  
  {{form.pwd.$error.required&＃63;'pwd该项必填':''}}
  
  {{form.info.$error.required&＃63;'info该项必填':''}}
  
  {{form.age.$error.required&＃63;'age该项必填':''}}
  
  

    提交
  

  
  

    
该项必填
    
低于最低长度
    
应为email
  

  
  

    
该项必填
    
低于最低长度
    
应为email
    
用户名已存在
  

angular.module('myApp', ['ngMessages']).directive('ensureUnique', ['$http', '$timeout', '$window', function ($http, $timeout, $window) {
      return {
        restrict: "A",
        require: 'ngModel',
        link: function (scope, ele, attrs, ngModelController) {
          scope.$watch(attrs.ngModel, function (n) {
            if (!n) return;
            $timeout.cancel($window.timer);
            $window.timer = $timeout(function () {
              $http({
                method: 'get',
                url: '/api/checkusername/', //根据换成自己的url
                params: {
                  "username": n
                }
              }).success(function (data) {
                ngModelController.$setValidity('unique', data.isUnique); //这个取决于你返回的，其实就是返回一个是否正确的字段，具体的这块可以自己修改根据自己的项目
              }).error(function (data) {
                ngModelController.$setValidity('unique', false);
              });
            }, 500);
          });
        }
      };
    }]);