elementui表单多元素验证结合防抖

场景：elementui进行表单验证时，多个输入框同一个验证规则，此时弹窗验证提示消息会出现多条，此时需要运用防抖解决；

场景一：提交表单，只用弹窗提示消息，无需输入框下方提示；

1.字段

rules:{
      ****: [
          { required: true, message: "xxxx", trigger: "blur" },
          {
            required: true,
            validator: this.debounce(debounceCheck, 1000),
            trigger: "blur",
          },
}

2.自定义规则

var debounceCheck = (rule, vlaue, callback) => {
      let sum = ***;
      if (sum > ***) {
        this.$message({
          message: "xxxx",
          type: "error",
        });
      }
      return callback();
    };

3.防抖函数

debounce(func, wait) {
      let timer;
      let that = this;
      return function (that) {
        console.log("debounce", this === that);
        let context = that; // 注意 this 指向
        let args = arguments; // arguments中存着e

        if (timer) clearTimeout(timer);

        timer = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    },

注意点：防抖与节流函数都需要写在验证规则rules里面,validator: this.debounce(debounceCheck, 1000) ，写在自定义规则中不会生效

 

场景二：即显示输入框下方的默认提示，提交时显示弹窗消息

1.字段：

　　注意点，如果加上两套自定义规则，会只执行第一个(存在bug)，所以只能写一套(输入框下方提示)；验证弹窗消息在提交时单独调用；

　　在验证规则中加入data字段设定状态，但状态改变仍然会弹窗提示多次，故调用弹窗消息函数时仍需要结合防抖；

rules:{
shouldDisburseTotal: [
          { required: true, message: "xxxx", trigger: "blur" },
          {
            required: true,
            validator: checkCurrentCost,
            trigger: "blur",
          },

　　　　　　// {

          //   required: true,

          //   validator: this.debounce(debounceCheck, 1000),

          //   trigger: "blur",

          // },

        ],
}

2.自定义规则：

var checkCurrentCost = (rule, value, callback) => {
      let sum = ***;
      var reg = /^(([1-9]\d*)(\.\d{1,2})?|0\.([1-9]|\d[1-9])|0)$/;
      if (!reg.test(value)) {
        return callback(new Error("请输入整数或两位小数"));
      } else if (sum > ***) {
        this.isTotalMuch = true;//定义一个data字段,状态
        return callback(new Error("xxxx"));
      } else {
        return callback();
      }
    };

3.弹窗提示消息函数

debounceTotal() {
      if (this.isTotalMuch) {
        this.$message({
          message: "xxxx",
          type: "error",
        });
      }
    },

4.提交表单时单独调用

this.debounce(this.debounceTotal, 1000);

 附：

//防抖
    debounce(fn, delay) {
      // 记录上一次的延时器
      var timer = null;
      var delay = delay || 200;
      return function() {
        var args = arguments;
        var that = this;
        // 清除上一次延时器
        clearTimeout(timer);
        timer = setTimeout(function() {
          fn.apply(that, args);
        }, delay);
      };
    },
    //节流
    throttle(fn, wait) {
      var timer = null;
      return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
          timer = setTimeout(function() {
            fn.apply(context, args);
            timer = null;
          }, wait);
        }
      };
    },