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

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

html

rush:xhtml;">

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

error.html

rush:xhtml;"> required">必填 名称已存在

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

rush:js;"> app.directive('nameCheck',nameCheck);

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

function nameCheck(HttpService,$q){

var NAME_REG = /^[a-zA-Z\u4e00-\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;
  }
}

}
}

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