angular 基于ng-messages的表单验证实例       本篇文章主要介绍了angular 基于ng-messages的表单验证实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
div ng-class="{'has-error': myForm.myName.$touched myForm.myName.$invalid}" label name /label div input type="text" name="myName" ng-model="formData.username" placeholder="2-10个中英文字符，aaa会重名，必填" name-check minlength="2" maxlength="10" required /div div ng-messages="myForm.myName.$error" ng-messages-include="demos/" ng-show="myForm.myName.$touched" /div /div

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

<

 span ng-message="required" 必填 /span 
 span ng-message="char" 非法字符 /span 
 span ng-message="exist" 名称已存在 /span 
 span ng-message="minlength" 太短了 /span 

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

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;

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