vue3+ant design vue的form表单校验规则进行确认密码校验

要在 Vue 3 中使用 Ant Design Vue 的 Form 表单组件进行确认密码校验，你可以自定义校验规则来实现。下面是一个示例：

<template>
  <a-form ref="form" :model="formData">
    <a-form-item label="密码" name="password" rules="required">
      <a-input type="password" v-model="formData.password" />
    </a-form-item>
    <a-form-item label="确认密码" name="confirmPassword" rules="required,checkPassword">
      <a-input type="password" v-model="formData.confirmPassword" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="submitForm">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { ref } from 'vue';
import { Form, Input, Button, message } from 'ant-design-vue';

export default {
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-input': Input,
    'a-button': Button
  },
  setup() {
    const formRef = ref(null);
    const formData = ref({
      password: '',
      confirmPassword: ''
    });

    const checkPassword = (_, value) => {
      if (value !== formData.password) {
        return Promise.reject(new Error('两次密码输入不一致'));
      }
      return Promise.resolve();
    };

    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          // 验证通过，执行表单提交操作
          console.log('表单验证通过');
          // ...
        } else {
          console.log('表单验证失败');
        }
      });
    };

    return {
      formRef,
      formData,
      checkPassword,
      submitForm
    };
  }
};
</script>

在上述示例中，我们在确认密码字段的 `a-form-item` 组件上定义了一个名为 `checkPassword` 的校验规则。该规则使用了一个自定义校验函数，并在函数内部判断确认密码是否与密码字段的值相同。如果不相同，我们使用 `Promise.reject` 返回一个错误信息，表示校验失败；如果相同，我们使用 `Promise.resolve` 表示校验通过。

然后，我们将这个校验规则 `checkPassword` 应用到确认密码字段的 `rules` 属性中，通过逗号分隔多个规则。注意，我们还将 "required" 规则也应用到了确认密码字段上，以确保确认密码不能为空。

在 `submitForm` 方法中，我们使用 `formRef.value.validate` 方法来进行表单验证，当验证完成后执行回调函数。你可以在回调函数中处理验证通过和验证失败的情况。

希望以上信息对你有帮助！如果你还有其他问题，请随时提问。