Ant Design Vue 单个input 校验

在Ant Design Vue中，单个Input字段的校验通常可以通过集成Vuetify的验证系统来完成，尤其是当使用了`<a-form>`组件时。Ant Design Vue已经将一些基础的表单验证功能整合到了其表单控件中，如`Form.Item`中的`rules`属性。

下面是一个基本的例子，展示如何为一个输入框添加校验规则：

<template>
  <a-form :model="form">
    <a-form-item label="邮箱">
      <a-input v-model="form.email" rules="email" placeholder="请输入邮箱"></a-input>
      <a-form-item-explain slot="explain">请输入有效的邮箱地址</a-form-item-explain>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: ''
      }
    };
  },
  components: { ... },
};
</script>

在这个示例中，`v-model`绑定到数据对象`form.email`，`rules`设置为`"email"`，这表示期望输入的是一个合法的电子邮件地址。如果输入不符合规则，将会显示错误提示。

如果你想自定义验证规则，可以在`rules`里写一个函数：

rules: {
  email: [{ type: 'email', message: '请输入有效的邮箱地址' }]
}

或者使用一个对象：

rules: {
  email: {
    required: true, // 必填项
    message: '邮箱不能为空',
    validator(c, value) { // 自定义验证逻辑
      return /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test(value);
    }
  }
}

记住要在父组件上监听`$message`，以便接收来自`Ant Design Vue`的消息：

mounted() {
  this.$on('formFieldError', error => {
    console.error(error); // 或者处理具体的错误信息
  });
}

这样当你尝试提交无效的数据时，就会触发校验并显示相应的错误信息。