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);
        }
      };
    },