vue表单中动态数组怎样加验证

在 Vue 表单中对动态数组进行验证，需要在每个数组元素中添加一个 `valid` 属性，表示该元素是否有效。同时，我们需要为每个数组元素绑定一个 `v-model` 指令，将输入框中的值绑定到该元素的属性中。在提交表单时，遍历数组，检查每个数组元素的 `valid` 属性，如果有元素的 `valid` 属性为 `false`，则表单验证不通过，不能提交表单。

以下是一个示例，展示了一个动态数组的表单，其中 `items` 是一个数组，每个元素包含 `name` 和 `value` 两个属性，在输入框中输入的值将保存在 `value` 中。我们为每个数组元素添加了一个 `valid` 属性，并为每个输入框绑定了一个 `v-model` 指令，将输入框中的值绑定到该元素的 `value` 属性中。在输入框失去焦点时，调用 `validateInput` 方法验证该输入框的值是否有效，如果有效，则将该数组元素的 `valid` 属性设为 `true`，否则设为 `false`。在提交表单时，遍历数组，检查每个数组元素的 `valid` 属性，如果有元素的 `valid` 属性为 `false`，则表单验证不通过，不能提交表单。

<template>
  <form @submit.prevent="submitForm">
    <div v-for="(item, index) in items" :key="index">
      <label>{{ item.name }}</label>
      <input type="text" v-model="item.value" @blur="validateInput(item)">
      <div v-if="!item.valid" class="invalid-feedback">
        请输入有效的 {{ item.name }}
      </div>
    </div>
    <button type="button" @click="addItem">添加</button>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      items: [{ name: "姓名", value: "", valid: false }],
    };
  },
  methods: {
    addItem() {
      // 添加一个新的数组元素
      this.items.push({ name: "邮箱", value: "", valid: false });
    },
    submitForm() {
      if (this.validateForm()) {
        // 表单验证通过，提交表单
        // ...
      }
    },
    validateForm() {
      // 验证整个表单
      return this.items.every((item) => item.valid);
    },
    validateInput(item) {
      // 验证输入框内容是否有效
      item.valid = Boolean(item.value.trim());
    },
  },
};
</script>

在上述示例中，我们为每个输入框绑定了一个 `blur` 事件，该事件在输入框失去焦点时触发，调用 `validateInput` 方法验证该输入框的值是否有效。在 `validateInput` 方法中，如果输入框的值有效，则将该数组元素的 `valid` 属性设为 `true`，否则设为 `false`。在表单提交时，我们调用 `validateForm` 方法验证整个表单，该方法使用 `every` 方法遍历每个数组元素的 `valid` 属性，如果所有数组元素的 `valid` 属性都为 `true`，则返回 `true`，否则返回 `false`。在表单提交时，如果 `validateForm` 方法返回 `true`，则表单验证通过，可以提交表单。