需求

之前有一段时间做一个搜索查询

但是有很多限制条件，如果校验不成功需要给用户提示错误，当然项目用的是组件库的校验

我能否自己写一个？

其实 我是不会的！！！

探索

angular 的校验功能很强大

自身校验

    
        
     
            
                  
      
       There is an error with the field...
      
        
     
    
    

• $pristine (未修改过验证true)
• $dirty (修改过为true)
• $valid (通过验证)
• $invalid (未经过验证)

我们可以创建自定义的ngModel在ngModelController中实现验证。

angular中通过$validators来实现验证

var m1 = angular.module('app', []); m1.controller('customValidator', function () {   require: 'ngModel',   link: function () { scope, element, attrs, ngModel} {        ngModel.$validators.myValidator = function () {                ......           }    }})

自定义校验

在angularJs中使用$validators来实现表单的验证

m1.directive('validatePasswordCharacters', function() {            var REQUIRED_PATTERNS = [                /\d+/,                /[a-z]+/,                /[A-Z]+/,                /\W+/,                /^\S+$/            ];            return {                require : 'ngModel',                link : function($scope, element, attrs, ngModel) {                    ngModel.$validators.passwordCharacters = function(value) {                        var status = true;                        angular.forEach(REQUIRED_PATTERNS, function(pattern) {                            status = status && pattern.test(value);                        });                        return status;                    };                }            }        });

    
        
     
            
                  
      
                       You did not enter a password            
      
            
      
                       Your password must contain a numeric, uppercase and lowercase as well as special characters            
      
        
     
    
    

结果

没有输入之前

随意输入

异步校验

通过异步ajax与后台胡来判断用户的输入

ngModule.directive('usernameAvailableValidator', ['$http', function($http) {    return {        require : 'ngModel',        link : function($scope, element, attrs, ngModel) {            ngModel.$asyncValidators.usernameAvailable = function(username) {                return $http.get('/api/username-exists?u='+ username);            };        }    }    }]);

异步校验器$asyncValidators在触发的时候需要每个验证器返回一个promise对象。当promise完成的时候便是通过，reject的时候把错误注册到$error对象上。

当所有验证器通过，值才写入scope.

异步验证期间$valid和$invalide为undefined, 会有一个特殊标志$pending来表示，异步验证完成被移除。

    
    
         
     
              Checking Username...    
     
    
     
    

使用ngMessage来显示错误

    
        
             
     
            
      
       22.
      
            
      
       333...
      
            
      
       444...
      
        
     
        
     
            
              
     
    
    

当然 如果ng-message 无法满足错误提示的需求 也可以用ng-message-include

以上！！！

最后我的愿望