前端插件式的表单验证,起飞.......

告别繁琐的if-else判断,体验插件式的表单验证

表单验证一直是前端工程师常常会遇到的事,最近在做公司项目时,由于提交表单时,需要前端做一些判断,满足条件才给后台发送请求,否则提示用户哪里填写的条件不对,由于业务的关系,提交的表单信息各种各样,验证的规则也是五花八门,让我下定决心优化校验代码.

class创建Validator校验类 ---validator.js

使用es6的class语法来创建一个validator校验类以供项目中使用,包含add添加校验规则方法和start校验启动函数

class Validator {
  constructor() {
    this.cache = [];
  }
  // 添加校验方法
  add(value, rules) {
    for (let i = 0, rule; (rule = rules[i++]); ) {
      let strategyAry = rule.strategies.split(":");
      let errMsg = rule.errMsg;
      this.cache.push(function() {
        let strategy = strategyAry.shift();
        strategyAry.unshift(value);
        strategyAry.push(errMsg);
        return strategies[strategy].apply(value, strategyAry);
      });
    }
  }
  // 启动校验规则
  start() {
    for (let i = 0, validateFunc; (validateFunc = this.cache[i++]); ) {
      let errMsg = validateFunc();
      if (errMsg) {
        return errMsg;
      }
    }
  }
}

配合自定义的策略对象使用 ---validator.js

可以添加一些常用的项目表单验证规则

// 自定义strategies对象,添加常用的验证规则
let strategies = {
  isNotEmpty: function(value, errMsg) {
    if (value === "") {
      return errMsg;
    }
  },
  maxLength: function(value, length, errMsg) {
    if (value.length > length) {
      return errMsg;
    }
  }
};

使用Aop模式动态添加验证逻辑,与业务代码分离 ---validator.js

// AOP动态添加校验逻辑
let before = function(beforeFn, fn) {
  let _this = this;
  return function() {
    if (beforeFn.apply(_this, arguments) === false) {
      return _this.apply(_this, arguments)
    }
    return fn.apply(_this, arguments);
  };
};
export { Validator, before };

项目中使用 .vue

import { Validator, before } from "@/plugins/validator/validator";
validateFunc() { // 添加校验规则
  let validate = new Validator();
  validate.add(this.text, [ // 规则数组可以一个条件添加多个规则
    { strategies: "isNotEmpty", errMsg: "为空" },
    { strategies: "maxLength:1", errMsg: "最大长度为1" }
  ]);
  let errMsg = validate.start();
  if (errMsg) {
    this.$message.error(errMsg);
    return false;
  }
  return true;
},
login() {
  function confirmFunc() {
    // 业务代码
    this.$message.success("成功");
  }
  let confirm = before(this.validateFunc, confirmFunc);
  confirm();
}

起飞..................................