ant design vue 注册表单示例

好的，以下是一个简单的 Ant Design Vue 注册表单示例：

<template>
  <a-form ref="registerForm" :form="form" @submit="handleSubmit">
    <a-form-item label="用户名" :colon="false" :rules="[requiredRule]">
      <a-input v-model="form.username" />
    </a-form-item>
    <a-form-item label="密码" :colon="false" :rules="[requiredRule, passwordRule]">
      <a-input-password v-model="form.password" />
    </a-form-item>
    <a-form-item label="确认密码" :colon="false" :rules="[requiredRule, { validator: confirmPasswordValidator }]">
      <a-input-password v-model="form.confirmPassword" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">注册</a-button>
    </a-form-item>
  </a-form>
</template>

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

export default defineComponent({
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-input': Input,
    'a-input-password': Input.Password,
    'a-button': Button,
  },
  data() {
    return {
      form: {
        username: '',
        password: '',
        confirmPassword: '',
      },
      requiredRule: {
        required: true,
        message: '该项为必填项',
        trigger: 'blur',
      },
      passwordRule: {
        min: 6,
        max: 20,
        message: '密码长度为6-20位',
        trigger: 'blur',
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          // 注册逻辑
        }
      });
    },
    confirmPasswordValidator(rule, value, callback) {
      if (value !== this.form.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    },
  },
});
</script>

在这个示例中，我们使用了 Ant Design Vue 中的 `a-form`, `a-form-item`, `a-input`, `a-input-password` 和 `a-button` 组件来构建注册表单。我们定义了一个 `form` 对象来存储用户输入的数据，并且定义了两个校验规则 `requiredRule` 和 `passwordRule`。在提交表单时，我们调用 `validate` 方法来进行表单校验，如果表单校验通过则执行注册逻辑。同时，我们还定义了一个自定义的校验函数 `confirmPasswordValidator` 来验证确认密码是否与密码相同。