Veutify v-file-input 验证

Question

我想验证是否已使用 v-file-input 和 vee-validate 中的 ValidationProvider 选择文件。

下面是我的代码：

<v-flex>
  <ValidationProvider rules="required" v-slot="{ errors }">
    <v-file-input
      show-size
      accept=".xlsx"
      placeholder="Click here to select your file"
      label="File name"
      :error="errors.length > 0"
      :error-messages="errors[0]"
      @change="selectFile"
    >
    </v-file-input>
  </ValidationProvider>
</v-flex>

不知怎的，验证有效，但即使在我选择了一个文件之后，它也工作得很好：

我不知道我做错了什么？

Answer 1

发现我必须这样做，不知道为什么我的上面不起作用：

rules: [
  v => !!v || 'File is required',
  v => (v && v.size > 0) || 'File is required',
]

我的表格：

<v-flex>
  <ValidationProvider :rules="rules" v-slot="{ errors }">
    <v-file-input
      show-size
      accept=".xlsx"
      placeholder="Click here to select your file"
      label="File name"
      :error="errors.length > 0"
      :error-messages="errors[0]"
      @change="selectFile"
    >
    </v-file-input>
  </ValidationProvider>
</v-flex>

https://codepen.io/subashdbc/pen/eYpVOKq

在此发布代码以帮助任何需要此代码的人。

Answer 2

您只需使用

Vuetify

v-file-input

即可通过

:rules

的

prop

获得此行为 - 不需要

VeeValidate

。

<template>
   <v-file-input
     multiple
     :rules="[rules.requiredFile]"
   ></v-file-input>
</template>

<script setup lang="ts">

const rules = {
  requiredfile: (v: file) => {
    if (v.length == 0) {
      return "Must select at least one file.";
    }
  },
};

</script>