vue2+elementui,动态生成的表单校验

在Vue 2 + Element UI中，可以使用element-ui的表单验证功能来实现动态生成的表单的验证。以下是一个简单的例子：

<template>
  <el-form :model="form" :rules="rules" ref="dynamicForm">
    <el-form-item
      v-for="(item, index) in form.items"
      :key="index"
      :prop="'items.' + index + '.value'"
      :label="'Item ' + (index + 1)"
    >
      <el-input v-model="item.value"></el-input>
    </el-form-item>
 
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        items: [
          { value: '' }
          // 可以根据需要动态添加更多的items
        ]
      },
      rules: {
        'items.[{index}].value': [
          { required: true, message: '请输入Item值', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.dynamicForm.validate((valid) => {
        if (valid) {
          alert('验证通过!');
        } else {
          alert('验证失败!');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，我们定义了一个动态表单，其中items数组中的每个元素都对应一个表单项。在rules对象中，我们使用了动态的属性名'items.[{index}].value'来指定每个表单项的验证规则。在submitForm方法中，我们调用this.$refs.dynamicForm.validate来触发表单的验证。

注意，为了使动态规则生效，你需要在el-form-item的prop属性中指定正确的路径，这里使用了'items.' + index + '.value'。

这个例子演示了如何在Vue 2 + Element UI中实现动态表单的验证，你可以根据自己的需求进行扩展和应用。