vue循环生成的表单怎么加校验

在Vue中，如果你需要在循环生成的表单元素上添加校验，可以结合Vue的`v-model`指令和`v-bind`指令以及`v-form`, `v-validate`等来自`vuelidate`或`vue-router-validator`这样的验证插件。这里是一个简单的步骤：

1. 安装验证插件：如果是`vuelidate`，可以在`package.json`中安装并引入到项目中。

npm install vuelidate

然后，在main.js或其他合适的地方注册它：

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

2. 创建数据模型：每个表单项通常对应于一个对象，包含属性值和验证规则。

data() {
  return {
    items: [
      { field: '', required: true },
      { field: '', minLength: 5 }, // 示例验证规则
      // 更多...
    ]
  }
}

3. 使用模板循环生成表单，并绑定到数据模型：

<template>
  <form v-vuelidate="rules">
    <div v-for="(item, index) in items" :key="index">
      <input v-model="item.field" type="text"
             :required="item.required"
             :minlength="item.minLength">
      <span v-if="errors.has('items.' + index + '.field')" class="error">{{ errors.first('items.' + index + '.field') }}</span>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        items: { each: (val) => ({ [val.key]: val.validate }) } // 这里假设validate是每个字段自定义的验证函数
      }
    }
  }
}
</script>

4. 在`validate`函数中，你可以根据字段名访问输入值并应用相应的验证规则。例如，`this.$v.formName.itemIndex.field`将获取对应的输入值。

methods: {
  validate() {
    this.rules.items.each((ruleItem) => ruleItem.validate(this));
  }
}

5. 当用户提交表单时，调用`validate()`方法检查所有字段是否通过验证。