vue中表单循环input如何进行表单验证

在 Vue 中，我们可以通过在表单控件上绑定 `v-model` 指令来实现表单数据双向绑定。对于循环生成的表单控件，我们可以使用 `v-for` 指令来进行循环渲染。

要对循环生成的表单控件进行表单验证，我们可以使用自定义指令或者第三方库来实现。下面是使用自定义指令的示例代码：

<template>
  <form @submit.prevent="submitForm">
    <div v-for="(item, index) in formItems" :key="index">
      <label :for="'input-' + index">{{ item.label }}</label>
      <input :id="'input-' + index" v-model="item.value" v-validate:blur="item.rules" />
      <span v-if="errors.has('input-' + index)" class="error">{{ errors.first('input-' + index) }}</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formItems: [
        {
          label: '用户名',
          value: '',
          rules: 'required|min:3|max:16'
        },
        {
          label: '密码',
          value: '',
          rules: 'required|min:6|max:16'
        }
      ]
    }
  },
  methods: {
    submitForm() {
      if (this.errors.any()) {
        return;
      }
      // 表单验证通过，可以提交表单数据
    }
  },
  directives: {
    validate: {
      inserted(el, binding) {
        const input = el.tagName === 'INPUT' ? el : el.querySelector('input');
        input.addEventListener('blur', () => {
          const rules = binding.value.split('|');
          const fieldName = input.id;
          const errors = validate(fieldName, input.value, rules);
          if (errors) {
            input.classList.add('error');
            binding.instance.errors.add(fieldName, errors[0]);
          } else {
            input.classList.remove('error');
            binding.instance.errors.remove(fieldName);
          }
        });
      }
    }
  }
}
</script>

<style>
.error {
  color: red;
}
</style>

在上面的示例代码中，我们使用了 `v-validate` 指令来对表单控件进行验证，其中 `v-validate:blur` 表示在输入框失去焦点时进行验证。我们通过自定义指令 `validate` 来实现表单验证的逻辑，在 `inserted` 钩子函数中，我们使用了 `validate` 库来进行表单验证，并根据验证结果来添加或移除错误提示信息。在 `submitForm` 方法中，我们通过 `this.errors.any()` 来判断表单是否验证通过。

需要注意的是，这里使用的是第三方库 `validate` 来进行表单验证，你需要先安装该库并引入。同时，为了方便起见，这里的错误提示信息直接使用了 `validate` 库返回的第一个错误信息，你可以根据实际需求来自定义错误提示信息。