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

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

<template>
  <div>
    <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>
  </div>
</template>

<script>
export default {
  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)
        }
      })
    },
    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>` 组件来构建表单。表单中包含了用户名、密码和确认密码三个字段，并且每个字段都有对应的验证规则。用户在填写完表单后，可以点击“注册”按钮进行提交。在提交前，需要通过 `form.validateFields()` 方法来验证表单数据是否合法。如果数据合法，我们就可以在控制台中打印出表单的值。注意，在 `validateConfirmPassword` 方法中，我们使用了 `form.getFieldValue()` 方法来获取密码字段的值，以便和确认密码进行比较。

需要注意的是，Ant Design Vue v1 版本已经不再维护，建议尽快迁移到 v2 版本。在 v2 版本中，由于组件 API 发生了一些变化，上述示例可能需要进行一些修改。