Vue VeeValidate -如何处理自定义验证的异常

import { extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';

extend('customRule', {
  validate: value => {
    // 自定义验证逻辑
    return true; // 验证通过返回true，验证不通过返回false
  },
  message: '自定义验证错误消息'
});

extend('required', {
  ...required,
  message: '此字段为必填项'
});

extend('email', {
  ...email,
  message: '请输入有效的邮箱地址'
});

<template>
  <form @submit="submitForm">
    <div>
      <label for="name">姓名</label>
      <input type="text" id="name" v-model="name" v-validate="'required'" data-vv-as="姓名" />
      <span>{{ errors.first('name') }}</span>
    </div>
    <div>
      <label for="email">邮箱</label>
      <input type="email" id="email" v-model="email" v-validate="'required|email'" data-vv-as="邮箱" />
      <span>{{ errors.first('email') }}</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

import { ValidationObserver } from 'vee-validate';

export default {
  components: {
    ValidationObserver
  },
  methods: {
    submitForm() {
      this.$refs.observer.validate().then(valid => {
        if (valid) {
          // 表单验证通过，可以提交表单数据
          this.submitFormData();
        } else {
          // 表单验证不通过，处理验证错误
          console.log(this.$refs.observer.errors);
        }
      });
    },
    submitFormData() {
      // 提交表单数据的逻辑
    }
  }
}