在Vue中验证多个ValidationObserver

npm install vue vee-validate

import { ValidationObserver, ValidationProvider } from 'vee-validate';

export default {
  components: {
    ValidationObserver,
    ValidationProvider
  },
  data() {
    return {
      formData: {
        // 表单数据
      }
    };
  },
  methods: {
    onSubmit() {
      // 表单提交逻辑
    }
  }
};

<ValidationObserver v-slot="{ handleSubmit }">
  <form @submit.prevent="handleSubmit(onSubmit)">
    <ValidationProvider rules="required" v-slot="{ errors }">
      <input type="text" v-model="formData.field1" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>

    <ValidationProvider rules="required" v-slot="{ errors }">
      <input type="text" v-model="formData.field2" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>

    <!-- 其他表单元素 -->

    <button type="submit">提交</button>
  </form>
</ValidationObserver>

methods: {
  onSubmit() {
    this.$refs.observer.validate().then(result => {
      if (result) {
        // 表单验证通过，执行提交逻辑
      } else {
        // 表单验证失败，显示错误信息
      }
    });
  }
}