element 表单验证带上防抖及后台验证

记录日常，笔记作用

<el-form
      ref="form"
      label-position="right"
      label-width="107px"
      :model="form"
      :rules="rules"
    >
 <el-form-item label="组织编码" prop="deptCode">
      <el-input v-model="form.deptCode" clearable />
   </el-form-item>
 </el-form>

/**
util.debounce = function (func, wait) {
  let timer;
  return function (that) {
    let context = that; // 注意 this 指向
    let args = arguments; // arguments中存着e
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
};
*/
      form: {
      	deptCode:""
      },
      rules:{
		deptCode:[
		{ required: true, message: "请填写组织编码", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
          { validator: this.validate.letterNumber, trigger: "blur" },
          {
            validator: util.debounce(async (rule, value, callback) => {
              if (value !== "") {
                let isExist = true;
                if (this.action === "add") {
                  isExist = await isDeptCodeExist(value, null, false); // 异步请求跟后台返回对比
                } else {
                  isExist = await isDeptCodeExist(
                    value,
                    this.form.deptId,
                    false
                  );
                }
                if (isExist) {
                  return callback(new Error("组织编码已经存在，请重新输入."));
                }
              }
              callback();
            }, 400),
            trigger: "change",
          }
          ]
		}