微客导航 » 文章资讯 » angular 基于ng-messages的表单验证实例

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

2024-02-24 11:24:03 273

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

html


name

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

error.html

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

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

app.directive('nameCheck',nameCheck);

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

functionnameCheck(HttpService,$q){

varNAME_REG=/^[a-zA-Z\u4e00-\u9fa5]+$/;

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

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

}
deferred.resolve(true);
})

returndeferred.promise;
}
}
}
}

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐