如何在Vue中正确调用Ant Design的表单验证？

在Vue中使用Ant Design的Form组件进行验证，你需要按照以下步骤操作：

1. **安装依赖**：首先确保你已经安装了`@ant-design/icons`、`ant-design-vue`等Ant Design相关的库。如果还没有安装，可以使用npm或yarn来添加：

   npm install @ant-design/icons ant-design-vue
   # 或者
   yarn add @ant-design/icons ant-design-vue

2. **导入并实例化Form组件**：在你的Vue组件中，import Form和FormItem，并将表单数据(`baseData`)绑定到`model`属性：

   import { Form, Input } from 'ant-design-vue';

   export default {
     components: {
       Form,
       Input
     },
     data() {
       return {
         baseData: {} // 初始化表单的数据
       };
     }
   }

3. **定义验证规则（rules）**：在`data`里定义验证规则，你可以使用Ant Design提供的内置验证规则，如`required`、`number`等：

   rules: {
     name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
     age: [{ type: 'number', min: 0, max: 150, message: '年龄范围应在0-150岁之间', trigger: 'blur' }]
   }

4. **设置表单提交事件**：在`<form>`标签内，使用`@submit`事件处理表单提交，并调用`validate`方法进行验证：

   <form ref="form" @submit.prevent>
     <!-- 输入框等内容 -->
     <Form :model="baseData" :rules="rules">
       <!-- FormItem 标签用于包装验证字段 -->
       <FormItem label="名称" prop="name">
         <Input v-model="baseData.name" placeholder="请输入名称" />
       </FormItem>
       ... 其他输入项
     </Form>
   </form>

然后，在对应的JavaScript中调用`validate`：

   submitForm() {
     this.$refs.form.validate((valid) => {
       if (valid) {
         console.log('表单验证成功');
         // 提交表单逻辑...
       } else {
         console.log('表单验证失败，请检查输入');
       }
     });
   }

现在，当你提交表单时，会自动触发验证。如果验证失败，提示信息会在相应的输入框下方显示。