JS實(shí)現(xiàn)數(shù)據(jù)與邏輯分離的方法

  // 獲取表單form元素
  var form = document.getElementById('myForm');

  // 創(chuàng)建表單校驗(yàn)實(shí)例
  var validation = new FormValidator();
  // 編寫校驗(yàn)配置
  validation.add(form.username, 'isEmpty', '用戶名不能為空s');
  validation.add(form.password, 'minLength: 6', '密碼長(zhǎng)度不能小于6個(gè)字符');
  validation.add(form.password2, 'isEqualTo: password', '密碼不一致');
  validation.add(form.mobile, 'isMobile', '請(qǐng)?zhí)顚懻_的手機(jī)號(hào)');

  // 開始校驗(yàn)，并接收錯(cuò)誤信息
  $('#submit-btn').click(function() {
    var errorMsg = validation.start();

    // 如果有錯(cuò)誤信息輸出，說明校驗(yàn)未通過
    if(errorMsg){
      console.log(errorMsg);
      return false;
    }
  })

var VerifyPolicies = {
  isEmpty: function(value, errMsg) {
    if(value == '') return errMsg;
  },

  // 最小長(zhǎng)度
  minLength: function(value, length, errMsg) {
    if (value.length < length) return errMsg;
  },
  // 手機(jī)號(hào)碼
  isMobile: function(value, errMsg) {
    if(!/^1[34578]\d{9}$/.test(value)) return errMsg;
  },
  // 是否相等
  isEqualTo: function (value, toDom, errMsg) {
    var toValue = document.getElementById(toDom).value;

    if(value !== toValue) return errMsg;
  }
};

function FormValidator(VerifyPolicy) {
  this.verifyPolicies = VerifyPolicy ? VerifyPolicy : VerifyPolicies;
  // 待執(zhí)行的驗(yàn)證函數(shù)數(shù)組
  this.validateFn = [];
}

FormValidator.prototype.add = function(dom, rules, errMsg) {
  var _this = this;

  this.validateFn.push(function() {
    var args = [];
    var rule = rules.split(':');
    var ruleName = rule[0];
    var ruleParam = rule[1];
    var value = dom.value;

    args.push(value);
    if(ruleParam) args.push(ruleParam.trim());
    args.push(errMsg);

    // 這里調(diào)用apply只是為了傳參，如果支持ES6，也可以這樣做：
    // return _this.verifyPolicies[ruleName](...args)
    return _this.verifyPolicies[ruleName].apply(null, args);
  })
};

FormValidator.prototype.start = function() {
  var fn = this.validateFn;
  for(var i =0, len = fn.length; ; i++) {
    var msg = fn[i]();
    if(msg) return msg;
  }
};