angular 基于ng-messages的表单验证实例

最近在学习angular，那么今天也算个学习笔记吧！

html

 
  name
  
    
  
  
  

ng-messages="myForm.myName.$error" 给出错误类型(required, char, exist, minlength)

error.html

必填
非法字符
名称已存在
太短了

directive name-check 利用ngModel 的$validators,& $asyncValidators 添加自定义验证

app.directive('nameCheck', nameCheck);

nameCheck.$inject = ['HttpService', '$q'];

function nameCheck(HttpService, $q){

  var NAME_REG = /^[a-zA-Zu4e00-u9fa5]+$/;

  return {
    restrict: 'A',
    require: 'ngModel',
    link:function($scope,element,attrs,ctrl){

      ctrl.$validators.char = function(modelValue, viewValue) {
 var value = modelValue || viewValue;
 if(!NAME_REG.test(value)){
   return false;
 }
 return true;
      };
      ctrl.$asyncValidators.exist = function(modelValue, viewValue){
 var value = modelValue || viewValue;
 var deferred = $q.defer();
 HttpService.get('api/users/' + value).then(function(res) {
   if(res.isExist){
     deferred.reject(false);

   }
   deferred.resolve(true);
 })

 return deferred.promise;
      }
    }
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。