ant deign vue效验一个输入框

要对ant design vue的输入框进行验证，可以使用内置的表单验证规则和自定义验证规则。

首先，在模板中使用`<a-form-item>`包装输入框，并指定`name`属性和`rules`属性。`name`属性用于唯一标识该表单项，`rules`属性用于定义验证规则。

<template>
  <a-form :form="form">
    <a-form-item label="用户名" name="username" :rules="usernameRules">
      <a-input v-model="username" />
    </a-form-item>
  </a-form>
</template>

接下来，定义验证规则。可以使用内置的验证规则，如`required`、`min`、`max`等，也可以自定义验证函数。

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      username: ''
    };
  },
  computed: {
    usernameRules() {
      return [
        { required: true, message: '请输入用户名' },
        { min: 3, max: 10, message: '用户名长度在3到10之间' },
        { validator: this.checkUsername }
      ];
    }
  },
  methods: {
    checkUsername(rule, value, callback) {
      if (!/^[a-zA-Z0-9]+$/.test(value)) {
        callback(new Error('用户名只能包含字母和数字'));
      } else {
        callback();
      }
    }
  }
};
</script>

在上面的例子中，`usernameRules`是一个计算属性，它返回一个数组，包含了三个验证规则。第一个规则要求该输入框不能为空，第二个规则要求该输入框的长度在3到10之间，第三个规则是自定义的验证函数，要求用户名只能包含字母和数字。

最后，需要在提交表单时执行验证。可以使用`this.form.validateFields`方法来执行验证，如果验证通过，则执行提交操作。

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      username: ''
    };
  },
  methods: {
    submitForm() {
      this.form.validateFields((errors, values) => {
        if (errors) {
          console.log('表单验证不通过', errors);
        } else {
          console.log('表单验证通过', values);
        }
      });
    }
  }
};
</script>

这样，我们就可以对ant design vue的输入框进行验证了。