Vue 多表单校验_this.$refs.form.validatefield 可以写多个吗

Vue 多表单检验
1.应用场景：当需要使用到多个form表单；每个form绑的ref值不同；可以理解为这个ref是这个form的id。
2.校验方法：this.$refs[“formname”].validate,这个是elementui里面自带的校验方法；
还需要使用ES6的新特性，promise；promise其实就是一个构造函数
3.代码：
这是js部分，template里面只需要写form表单就可以了

 const base = new Promise((resolve, reject) => {
        this.$refs["aform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      const soap = new Promise((resolve, reject) => {
        this.$refs["bform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      const http = new Promise((resolve, reject) => {
        this.$refs["cform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      const mq = new Promise((resolve, reject) => {
        this.$refs["dform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      const sql = new Promise((resolve, reject) => {
        this.$refs["eform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      const tcp = new Promise((resolve, reject) => {
        this.$refs["fform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      if (this.addlist.AdapteroptionsValue == "SOAP") {
        Promise.all([base, soap]).then(() => {
          this.subscriberRegisterSave();
          this.$message.success("新建成功");
          this.dialogFormVisible = false;
          this.$refs["aform"].resetFields();
          this.$refs["bform"].resetFields();
          this.$refs["cform"].resetFields();
          this.$refs["dform"].resetFields();
          this.$refs["eform"].resetFields();
          this.$refs["fform"].resetFields();
        });
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55