vue2 ant design vue 的注册表单示例

可以参考以下代码：

<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item
        label="用户名"
        :validateStatus="form.getFieldError('username') ? 'error' : ''"
        :help="form.getFieldError('username') ? form.getFieldError('username').join(', ') : ''"
      >
        <a-input v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]" />
      </a-form-item>
      <a-form-item
        label="密码"
        :validateStatus="form.getFieldError('password') ? 'error' : ''"
        :help="form.getFieldError('password') ? form.getFieldError('password').join(', ') : ''"
      >
        <a-input type="password" v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">注册</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

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

export default {
  name: 'RegisterForm',
  components: {
    AForm: FormModel,
    AFormItem: FormModel.Item,
    AInput: Input,
    AButton: Button,
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'register' }),
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
  },
};
</script>

这是一个使用了 ant-design-vue 的注册表单示例，包括了用户名和密码两个输入框，以及一个提交按钮。在表单中使用了 ant-design-vue 的 FormModel、Input、Button 组件，以及 ant-design-vue 的表单校验规则 v-decorator。在 handleSubmit 方法中，调用了 form.validateFields 方法进行表单校验，并且在控制台输出了表单的值。