如何在Ant Design Vue中正确地使用validateStatus属性？

在Ant Design Vue中，`validateStatus` 属性是一个用于设置表单验证状态的颜色显示，如success、warning、error等，它可以帮助用户直观地了解输入是否有效。要在表单组件中正确使用这个属性，你需要按照以下步骤操作：

1. 首先，在你的Form组件上添加 `model` 和 `rules` 属性，这是 Ant Design Vue 表单验证的基础。

<template>
  <a-form ref="formRef" :model="formData" :rules="rules">
    <!-- ...其他表单元素 -->
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {}, // 表单数据
      rules: {}   // 规则对象，包含 validateStatus 可能会改变的状态字段
    };
  },
  // ...
}
</script>

2. 在 `rules` 对象中，你可以为每个需要验证的表单项定义验证规则，并在规则对象中设置 `validateStatus`。例如：

rules: {
  email: [
    { required: true, message: '请输入邮箱', validateStatus: 'required' }, // 如果验证失败，显示 "required"
    { type: 'email', message: '邮箱格式错误', validateStatus: 'invalid' }  // 类型校验失败，显示 "invalid"
  ],
  password: [{ required: true, message: '请输入密码', validateStatus: 'required' }]
}

3. 当表单提交时，通过 `formRef` 调用 `validate()` 方法检查并更新验证状态，如果验证成功，`validateStatus` 就会被应用到对应的提示文案上。比如：

methods: {
  handleSubmit(e) {
    this.$refs.formRef.validate((valid) => {
      if (valid) {
        console.log('提交成功');
      } else {
        console.log('表单验证未通过');
      }
    });
  },
}

4. 最后，你可以在表单的提示信息里动态展示 `validateStatus`：

<a-form-item label="邮箱" :rules="rules.email">
  <a-input v-model="formData.email"></a-input>
  <a-tooltip placement="top" title="{ validateStatus: 'status' }">这是一个有状态的提示</a-tooltip>
</a-form-item>

在这里，`{ validateStatus: 'status' }` 表示将 `validateStatus` 的值传递给 tooltip 的 title 属性。