angularjs全局表单校验器——使用策略模式

angularjs 全局表单校验器——使用策略模式

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "Validator" 校验器
mainApp.factory('Validator', function() {
    function Validator(strategies) {
      if(this instanceof Validator) {
        this.catch = [];
        this.strategies = strategies;
      } else {
        return new Validator(strategies);
      }
    }
    angular.extend(Validator.prototype, {
      add: function(value, rules) {
        var _this = this;
        for (var i = 0, rule; (rule = rules[i++]); ) {
          (function(rule) {
            var arr = rule.strategy.split(':');
            _this.catch.push(function() {
              var strategy = arr.shift();
              arr.unshift(value);
              arr.push(rule.errorMsg);
              return _this.strategies && _this.strategies[strategy] && _this.strategies[strategy].apply(null, arr);
            });
          })(rule);
        }
      },
      start: function() {
        for (var i = 0, validatorFunc; (validatorFunc = this.catch[i++]); ) {
          var msg = validatorFunc();
          if (msg) {
            return msg;
          }
        }
      },
    });
    return Validator;
}); 

// 在 controller 中注入 factory "Validator"
mainApp.controller('testCtrl', function(Validator){
    // 校驗方法
    function validatorFunc() {
      var validator = Validator(strategies);
      validator.add($scope.merApplyInfo.shortName, [
        {
          strategy: 'isNonEmpty',
          errorMsg: '請輸入對外經營名稱',
        },
      ]);

      return validator.start();
    }

    // 保存并下一步
    $scope.nextFun = function() {
      // TODO: isDebug 使用策略模式校验,不要再写if else了,受不鸟
      var errorMsg = validatorFunc();
      if (errorMsg) {
        toast.show(errorMsg);
        return;
      }
      // 下一步提交逻辑
   }
});

你可能感兴趣的:(JavaScript,angularjs)