vue表单中数组怎样加验证

在 Vue 表单中对数组进行验证，可以使用 `v-for` 指令循环展示每个数组元素，同时为每个元素绑定一个验证规则。例如，以下示例展示了一个包含多个输入框的表单，其中 `inputs` 是一个数组，每个元素包含 `label` 和 `value` 两个属性，在输入框中输入的值将保存在 `value` 中：

<template>
  <form @submit.prevent="submitForm">
    <div v-for="(input, index) in inputs" :key="index">
      <label :for="`input-${index}`">{{ input.label }}</label>
      <input
        :id="`input-${index}`"
        type="text"
        v-model="input.value"
        :class="{ 'is-invalid': !validateInput(input.value) }"
      >
      <div v-if="!validateInput(input.value)" class="invalid-feedback">
        请输入有效的 {{ input.label }}
      </div>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      inputs: [
        { label: "用户名", value: "" },
        { label: "密码", value: "" },
        { label: "邮箱", value: "" },
      ],
    };
  },
  methods: {
    submitForm() {
      if (this.validateForm()) {
        // 表单验证通过，提交表单
        // ...
      }
    },
    validateForm() {
      // 验证整个表单
      return this.inputs.every((input) => this.validateInput(input.value));
    },
    validateInput(value) {
      // 验证输入框内容是否有效
      return Boolean(value.trim());
    },
  },
};
</script>

在上述示例中，我们为每个输入框绑定了一个 `validateInput` 方法作为验证规则，该方法接受一个参数 `value`，表示输入框中的值。如果输入框的值不符合要求，将为该输入框添加 `is-invalid` 类，同时显示一个错误提示信息。在表单提交时，我们调用 `validateForm` 方法验证整个表单，该方法使用 `every` 方法遍历每个输入框的值，如果所有输入框的值都符合要求，则返回 `true`，否则返回 `false`。在表单提交时，如果 `validateForm` 方法返回 `true`，则表单验证通过，可以提交表单。