Vant2.x 进行form的多组验证提交

前提条件：

项目使用的是 Vue2.7，Vant2.x

使用场景：

[
  {
    id: 1,
    username: 'user1',
    address: '',
  },
  {
    id: 2,
    username: 'user2',
    address: '',
  }
]

当需要如上数据结构的批量提交数据，并且利用vant本身自带的form验证功能时

代码实现

简单写一个form结构

<van-form @submit="onSubmit">
  <div class="forms">
    <div class="form" v-for="formItem in forms" :key="formItem.id">
      <van-field v-model="formItem.username" required label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="formItem.address" label="地址" placeholder="地址" />
    </div>
  </div>
  <div style="margin: 16px;">
    <van-button round block native-type="button" type="primary" @click="addForm">添加</van-button>
    <van-button round block type="info" native-type="submit" style="margin-top: 8px;">提交</van-button>
  </div>
</van-form>

说明：

1. 需要验证的字段，在van-field上添加属性required和rules即可
2. 添加按钮的native-type="button"是必须的，如果不加上会在添加form元素时触发验证，因为vant2.x时，form中的button的type默认是submit

import { ref } from 'vue'
import { v4 as uuidv4 } from 'uuid'

const forms = ref([
  { id: uuidv4(), username: '', address: '' },
])

function addForm() {
  forms.value.push({ id: uuidv4(), username: '', address: '' })
}

function onSubmit() {
  // forms.value
}

这里onSubmit时并没有使用vant本身提交时获取的values，因为表单本身就是和forms中的数据双向绑定的，所以可以直接使用forms.value进行提交

另外因为使用的是vue2.7，这里使用组合式或选项式都可以

import { v4 as uuidv4 } from 'uuid'
export default {
  data() {
    return {
      forms: [
        { id: uuidv4(), username: '', address: '' },
      ],
    }
  },
  methods: {
    addForm() {
      this.forms.push({ id: uuidv4(), username: '', address: '' })
    },
    onSubmit() {
      // this.forms
    },
  },
}