vue antd表单验证

### Vue 和 Ant Design 表单验证示例教程

#### 使用 `a-form` 组件创建表单并设置验证规则

为了实现有效的表单验证，在使用 Ant Design Vue 的 `<a-form>` 组件时，可以为各个字段配置相应的验证规则。下面是一个完整的例子来展示如何构建带有自定义验证逻辑的表单项。

<template>
  <a-form :model="dataForm" @finish="onFinish">
    <!-- 群聊选择框 -->
    <a-form-item ref="groupChat" label="选择群聊" name="chatId"
                 :rules="[{
                   required: true,
                   trigger: 'change',
                   validator: validateChatGroup
                 }]">
      <SelectChatGroup :corp-id="$route.query.corpId || null"
                       v-model:value="dataForm.chatId.chatIds"/>
      <SelectedChatGroupList v-if="dataForm.chatId.chatIds.length"
                             v-model:value="dataForm.chatId.chatIds"/>
    </a-form-item>

    <!-- 提交按钮 -->
    <a-button type="primary" html-type="submit">提交</a-button>
  </a-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import SelectChatGroup from './components/SelectChatGroup.vue';
import SelectedChatGroupList from './components/SelectedChatGroupList.vue';

const groupChatRef = ref(null);
const dataForm = reactive({
  chatId: {
    chatIds: []
  }
});

// 自定义验证函数
function validateChatGroup(rule, value, callback) {
  if (!value || !Array.isArray(value) || value.length === 0) {
    return Promise.reject(new Error('请选择至少一个群聊'));
  }
  return Promise.resolve();
}

// 清除验证错误消息监听器
watch(() => dataForm.chatId.chatIds, () => {
  nextTick(() => {
    groupChatRef.value?.clearValidate();
  });
}, { immediate: true });

async function onFinish(values) {
  console.log('Received values of form:', values);
}
</script>

此代码片段展示了如何通过组合 `ref` 属性和 `validate` 方法来自定义特定条件下的验证行为[^1]。此外，还说明了怎样利用 `watch` 来响应数据变化，并适时清理不再适用的验证提示信息。

对于某些情况下遇到的问题，比如移除了 `v-model` 后无法正常工作的情况，则建议采用编程方式访问表单实例并通过其提供的 API 获取当前值或执行其他操作，例如：

this.form.getFieldValue('fieldName');

这种方法能够绕过潜在的双向绑定问题，提供更灵活的数据管理方案[^2]。