ant design vue表单中包含简单和循环表单内容，如何进行校验

在 Ant Design Vue 表单中进行校验可以使用 validate 方法。对于简单表单内容，可以直接在表单项上设置 rules 属性；对于循环表单内容，可以使用 validateField 方法。

对于简单表单项，可以在表单项上设置 rules 属性，如下所示：

<template>
  <a-form :form="form">
    <a-form-item label="Username" :rules="[{ required: true, message: 'Please input your username' }]">
      <a-input v-model="form.username" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="submitForm">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
      },
    };
  },
  methods: {
    submitForm() {
      this.form.validate((valid) => {
        if (valid) {
          // 校验通过
        } else {
          // 校验未通过
        }
      });
    },
  },
};
</script>

对于循环表单项，可以使用 validateField 方法，在循环中遍历表单项并进行校验，如下所示：

<template>
  <a-form :form="form">
    <a-form-item v-for="(item, index) in formItems" :key="index">
      <a-input v-model="item.value" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="submitForm">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      formItems: [
        { value: 'item 1' },
        { value: 'item 2' },
        { value: 'item 3' },
      ],
    };
  },
  methods: {
    submitForm() {
      let valid = true;
      // 遍历表单项并进行校验
      this.formItems.forEach((item, index) => {
        this.form.validateField(`formItems[${index}].value`, (errorMessage) => {
          if (errorMessage) {
            valid = false;
          }
        });
      });

      if (valid) {
        // 校验通过
      } else {
        // 校验未通过
      }
    },
  },
};
</script>

在代码中，`validateField` 方法的第一个参数是表单项的名称，需要使用字符串模板来动态生成名称。在循环中遍历表单项时，可以使用表单项的索引来生成名称。