利用Array.every实现多表单验证

如果页面有多个表单,可这么来实现，减少代码量

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
<template>
  <Row>
    <Col>
      <Form ref="ref1">
      </Form>
      <Form ref="ref2">
      </Form>
      <Form ref="ref2">
      </Form>
    </Col>
    <Col>
      <Button @click="submitHandler">提交</Button>
    </Col>
  </Row>
</template>
<script>
  export default {
    name: 'FormComponent',
    data () {
      return {
        form1: {},
        form1Ruels: {},
        form2: {},
        form2Rules: {}
      } 
    },
    methods: {
      async submitHandler () {
        const formArray = ['form1', 'form2', 'form3']
        const validators = formArray.map(it => (this.$refs[it].validate(v => v)))
        // 一般的UI框架都基于async-form做的Form表单
        const validateResults = await Promise.all(validators)
        const v = validateResults.every(v => v)
        v && this.doPost()
      },
      async doPost () {
        const res = await axios.post(xxxx)
        console.log(res)
      }
    }
  }
</script>