如何使用vee-validate创建交叉验证字段？

import { extend, ValidationObserver, ValidationProvider } from 'vee-validate';
import { required, confirmed } from 'vee-validate/dist/rules';
import { localize } from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN.json';

// 导入中文语言包
localize('zh_CN', zh_CN);

// 注册required和confirmed规则
extend('required', required);
extend('confirmed', confirmed);

<ValidationProvider name="password" rules="required" v-slot="{ errors }">
  <input type="password" v-model="password" placeholder="密码">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

<ValidationProvider name="confirmPassword" rules="required|confirmed:password" v-slot="{ errors }">
  <input type="password" v-model="confirmPassword" placeholder="确认密码">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

data() {
  return {
    password: '',
    confirmPassword: '',
    errors: []
  };
}

<ValidationObserver v-slot="{ invalid }">
  <button @click="submitForm" :disabled="invalid">提交</button>
</ValidationObserver>

methods: {
  submitForm() {
    this.$refs.observer.validate().then(success => {
      if (success) {
        // 表单验证通过，执行提交操作
      } else {
        // 表单验证失败，处理错误信息
        this.errors = this.$refs.observer.errors;
      }
    });
  }
}