vue rules 表单验证数组

在Vue中，可以使用Vue的表单验证规则来验证数组。下面是一个示例代码，演示如何使用Vue的表单验证规则来验证数组：

首先，在Vue组件中定义一个包含数组的表单数据对象，并为每个数组元素定义验证规则。例如，我们有一个名为"items"的数组，每个元素都应该是字符串，并且不能为空。

<template>
  <form @submit="submitForm">
    <div v-for="(item, index) in items" :key="index">
      <input v-model="items[index]" :class="{ 'is-invalid': !isItemValid(index) }">
      <div v-if="!isItemValid(index)" class="invalid-feedback">Item is required.</div>
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      items: ['', '', ''], // 初始值为空字符串的数组
    };
  },
  methods: {
    submitForm() {
      // 在提交表单时，检查每个数组元素是否满足验证规则
      if (this.items.every(item => item !== '')) {
        // 执行提交表单的操作
        console.log('Form submitted successfully!');
      } else {
        console.log('Form validation failed!');
      }
    },
    isItemValid(index) {
      // 验证特定索引的数组元素是否满足验证规则
      return this.items[index] !== '';
    },
  },
};
</script>

在上面的代码中，我们使用`v-for`指令遍历数组，并使用`v-model`指令将输入框与数组元素进行绑定。使用`:class`绑定了一个条件类，当数组元素不满足验证规则时添加`is-invalid`类，以便显示样式上的错误提示。同时，我们在每个输入框后面显示了一个错误提示信息，只有当数组元素不满足验证规则时才会显示。

在`submitForm`方法中，我们使用`every`方法检查所有数组元素是否都不为空字符串，如果是，则表示表单验证通过，可以执行提交表单的操作。

上述代码只是一个简单的示例，你可以根据具体的需求和验证规则进行更复杂的表单验证。