ant deign vue + TS 效验一个输入框

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

首先，在模板中使用`<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`等，也可以自定义验证函数。这里我们将验证规则定义为一个对象，并使用`ValidationRule`类型来指定规则的类型。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { ValidationRule } from 'ant-design-vue/types/form/form';

@Component
export default class MyComponent extends Vue {
  private form = this.$form.createForm(this);
  private username = '';

  private get usernameRules(): ValidationRule[] {
    return [
      { required: true, message: '请输入用户名' },
      { min: 3, max: 10, message: '用户名长度在3到10之间' },
      { validator: this.checkUsername }
    ];
  }

  private checkUsername(rule: any, value: string, callback: any) {
    if (!/^[a-zA-Z0-9]+$/.test(value)) {
      callback(new Error('用户名只能包含字母和数字'));
    } else {
      callback();
    }
  }

  private submitForm() {
    this.form.validateFields((errors, values) => {
      if (errors) {
        console.log('表单验证不通过', errors);
      } else {
        console.log('表单验证通过', values);
      }
    });
  }
}
</script>

在上面的例子中，我们使用了`ValidationRule`类型来定义了验证规则的类型，并将`usernameRules`定义为一个返回`ValidationRule`数组的计算属性。同时，我们也将`checkUsername`方法的参数类型指定为`any`和`string`，并使用`callback`参数来返回验证结果。

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

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { ValidationRule } from 'ant-design-vue/types/form/form';

@Component
export default class MyComponent extends Vue {
  private form = this.$form.createForm(this);
  private username = '';

  private get usernameRules(): ValidationRule[] {
    return [
      { required: true, message: '请输入用户名' },
      { min: 3, max: 10, message: '用户名长度在3到10之间' },
      { validator: this.checkUsername }
    ];
  }

  private checkUsername(rule: any, value: string, callback: any) {
    if (!/^[a-zA-Z0-9]+$/.test(value)) {
      callback(new Error('用户名只能包含字母和数字'));
    } else {
      callback();
    }
  }

  private submitForm() {
    this.form.validateFields((errors, values) => {
      if (errors) {
        console.log('表单验证不通过', errors);
      } else {
        console.log('表单验证通过', values);
      }
    });
  }
}
</script>

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