ant design vue v1版本的 注册表单示例

以下是一个使用 Ant Design Vue v1 版本的注册表单示例：

<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item label="用户名">
      <a-input v-decorator="['username', {rules: [{required: true, message: '请输入用户名'}]}]" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input type="password" v-decorator="['password', {rules: [{required: true, message: '请输入密码'}]}]" />
    </a-form-item>
    <a-form-item label="确认密码">
      <a-input type="password" v-decorator="['confirmPassword', {rules: [{required: true, message: '请确认密码'}, {validator: validateConfirmPassword}]}" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">注册</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
    };
  },
  methods: {
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          // 处理提交逻辑
        }
      });
    },
    validateConfirmPassword(rule, value, callback) {
      const { form } = this;
      if (value && value !== form.getFieldValue('password')) {
        callback('两次输入的密码不一致');
      } else {
        callback();
      }
    },
  },
};
</script>

这个示例中使用了 Ant Design Vue 的 `a-form` 和 `a-form-item` 组件构建表单，使用 `v-decorator` 指令来绑定表单项的值和校验规则。`handleSubmit` 方法用于处理表单提交逻辑，其中使用了 `validateFields` 方法来校验表单项的值。`validateConfirmPassword` 方法用于校验确认密码是否与密码一致。