vue2 ant design vue 的注册表单示例

以下是一个使用 Vue2 和 ant design vue 的注册表单示例：

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

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

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

在这个示例中，我们使用了 ant design vue 的 `FormModel`、`Input`、`Button` 组件，并且使用了 Vue2 的模板语法来构建表单。在 `v-decorator` 中，我们定义了表单项的验证规则，通过 `handleSubmit` 方法来提交表单，并在控制台上输出表单值。