elementui form多表单验证

Published: · LastMod: August 18, 2022 · 160 words

多表单验证 🔗

页面中存在多个表单验证时,要验证多个表单是否完整就比较费劲

平时业务中验证都是这样的回调形式

1
2
3
this.$refs.form1.validate((valid) => {
  // ....
});

重新写个高阶函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const validateForms = (...args) => {
  return Promise.all(
    args.map(
      (form) =>
        new Promise((r, j) =>
          form && typeof form.validate === "function"
            ? form.validate((v) => (v ? r() : j()))
            : j()
        )
    )
  );
};

业务代码

1
2
3
4
5
6
7
8
validateForms(
  this.$refs.form1,
  this.$refs.form2,
  this.$refs.form3 // ...多个form实例
).then(() => {
  // code
  // 具体全部验证后的代码
});