vue VeeValidate验证多选

要验证一个多选框，可以使用`v-validate`指令来设置验证规则，并将`rules`属性设置为`{ required: true }`来确保至少选择了一个选项。以下是一个示例：

<template>
  <div>
    <label>选择你喜欢的水果:</label>
    <div>
      <label>
        <input type="checkbox" name="fruits[]" value="apple" v-model="selectedFruits" v-validate="'required'">
        苹果
      </label>
      <label>
        <input type="checkbox" name="fruits[]" value="banana" v-model="selectedFruits">
        香蕉
      </label>
      <label>
        <input type="checkbox" name="fruits[]" value="orange" v-model="selectedFruits">
        橙子
      </label>
    </div>
    <div v-show="errors.has('fruits[]')">{{ errors.first('fruits[]') }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selectedFruits: [],
      };
    },
  };
</script>

在这个示例中，我们使用了一个`selectedFruits`数组来存储选中的水果。每个复选框都绑定到这个数组中，当选中或取消选中一个复选框时，`selectedFruits`数组会相应地更新。我们还使用了`v-validate`指令来设置验证规则，并将`rules`属性设置为`{ required: true }`，以确保至少选择了一个选项。我们还为错误消息添加了一个`v-show`指令，以便在有错误时显示它们。

请注意，由于多选框的值是一个数组，因此我们还需要在`name`属性中添加一个`[]`，以便在提交表单时将所有选定的水果作为数组传递。