表单验证中策略模式运用

112 阅读1分钟
var strategies = {
    isNonEmpty: function( value, errorMsg ){    // 不为空
      if ( value === '' ){
          return errorMsg ;
      }
    },
    minLength: function( value, length, errorMsg ){    // 限制最小长度
        // console.log('value, length, errorMsg', value.length, length, errorMsg)
      if ( value.length < length ){
          return errorMsg;
      }
  },
  isMobile: function( value, errorMsg ){    // 手机号码格式
      if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
          return errorMsg;
      }
  }
};

Validator.prototype.add = function(value, rule, errorMsg) {
    var ary = rule.split(':');
    var strategy = ary.shift();
    var parameters = ary;
    parameters.unshift(value);
    parameters.push(errorMsg);
  
    console.log('parameters---', parameters)

    if (typeof strategies[strategy] === 'function') {
      this.cache.push(function() {
        return strategies[strategy].apply(null, parameters);
      });
    } else {
      throw new Error('Invalid validation strategy: ' + strategy);
    }
};


Validator.prototype.start = function(){
    for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
      var msg = validatorFunc();    // 开始校验,并取得校验后的返回信息
      if ( msg ){     // 如果有确切的返回值,说明校验没有通过
          return msg;
      }
    }
};

var validator = new Validator();

// 改成:
validator.add( 'wofvnlfk', 'minLength:10', '用户名长度不能小于10位' )
console.log('minLength---', validator.start());

validator.add( '', 'isNonEmpty', '不能为空' );
console.log('isNonEmpty---', validator.start());

validator.add( '188277', 'isMobile', '请输入正确的手机号码格式' );
console.log('isMobile---', validator.start());

validator.add 第一个参数为值。2. 'minLength:10’是一个以冒号隔开的字符串。冒号前面的minLength代表客户挑选的strategy对象,冒号后面的数字10表示在校验过程中所必需的一些参数。如果这个字符串中不包含冒号,说明校验过程中不需要额外的参数信息,比如’isNonEmpty'。 第3个参数是当校验未通过时返回的错误信息。 当我们往validator对象里添加完一系列的校验规则之后,会调用validator.start()方法来启动校验。如果validator.start()返回了一个确切的errorMsg字符串当作返回值,说明该次校验没有通过,此时需让onsubmit方法返回false来阻止表单的提交。

下面也是策略模式

function S( salary ){
    return salary * 4;
};

function A( salary ){
    return salary * 3;
};

function B( salary ){
    return salary * 2;
};
function calculateBonus(func, salary){
    return func(salary)
}
console.log('calculateBonus----',  calculateBonus(S, 10000  ));    // 输出:40000