Vue2表单提交校验：如何确保topicText或文件至少一项已填写？

要完成「文本框或上传文件至少有一项不为空」的联合校验，你可以按照以下步骤实现：

1. 关联子组件并获取文件状态 #

首先给<upload-files>添加ref，方便父组件获取已上传的文件列表，同时确保子组件暴露文件数组（以Vue3为例）：

修改父组件模板：

<upload-files ref="uploadFilesRef" />

子组件中暴露文件状态：

// UploadFiles.vue
<script setup>
import { ref } from 'vue'
const files = ref([])

// 这里是你的文件上传逻辑，更新files数组

// 暴露给父组件访问
defineExpose({ files })
</script>

2. 实现联合校验逻辑 #

你可以选择手动提交校验或者整合到VeeValidate规则体系，这里推荐更直观的手动校验方式：

父组件完整代码示例

<template>
  <v-layout @drop.prevent="addFiles" @dragover.prevent>
    <ValidationObserver
        ref="observer"
        v-slot="{ invalid }"
    >
      <form class="topic-form" @submit.prevent="submit">
        <ValidationProvider
          v-slot="{ errors }"
          name="消息内容"
          rules="max:255"
        >
          <v-textarea
              class="my-2"
              color="primary"
              rows="4"
              v-model="topicText"
              :counter="255"
              :error-messages="errors"
              @paste="pasteFiles"
              label="输入消息"
          ></v-textarea>
        </ValidationProvider>
        <upload-files ref="uploadFilesRef" />
        
        <!-- 显示联合校验错误提示 -->
        <div v-if="!hasValidContent && !invalid" class="text-red-500 text-sm mt-1">
          请输入文本或上传至少一个文件
        </div>

        <v-btn
            color="primary"
            class="my-2"
            type="submit"
            :disabled="isSubmitDisabled"
        >
          提交
        </v-btn>
      </form>
    </ValidationObserver>
  </v-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ValidationObserver, ValidationProvider, defineRule } from 'vee-validate'

// 注册max长度校验规则（若未全局注册）
defineRule('max', (value, [max]) => {
  if (value?.length > max) {
    return `内容不能超过${max}个字符`
  }
  return true
})

const observer = ref(null)
const topicText = ref('')
const uploadFilesRef = ref(null)

// 计算属性：判断是否有有效内容
const hasValidContent = computed(() => {
  const hasText = topicText.value.trim() !== ''
  const hasFiles = uploadFilesRef.value?.files?.length > 0
  return hasText || hasFiles
})

// 提交按钮禁用状态：单字段校验不通过 或 无有效内容
const isSubmitDisabled = computed(() => {
  return (observer.value?.invalid || false) || !hasValidContent.value
})

const submit = async () => {
  // 先执行单字段校验
  const fieldValid = await observer.value.validate()
  
  if (fieldValid && hasValidContent.value) {
    // 校验通过，执行提交逻辑
    console.log('提交数据：', {
      text: topicText.value,
      files: uploadFilesRef.value.files
    })
  }
}

// 拖拽上传、粘贴上传的逻辑保持原有实现
const addFiles = () => { /* ... */ }
const pasteFiles = () => { /* ... */ }
</script>

核心逻辑说明 #

• 通过ref获取子组件的文件列表，结合文本框内容判断是否满足「至少一项不为空」的条件
• 用计算属性hasValidContent统一管理联合校验状态，同时关联按钮的禁用状态
• 提交时先完成单个字段的校验（比如文本长度限制），再检查联合校验条件，确保所有规则都满足

内容的提问来源于stack exchange，提问作者haku