Vue+Element实现动态生成新表单并添加验证功能

下面我将为您介绍实现“Vue+Element实现动态生成新表单并添加验证功能”的完整攻略。具体步骤如下：

第一步：引入ElementUI和Vue.js

我们需要先在HTML文件中引入ElementUI和Vue.js，可以通过CDN来引入：

<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 引入ElementUI -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

第二步：创建表单组件

接下来我们需要先创建一个表单组件。在这个组件中，我们需要有一个动态生成新表单的方法。

<template>
  <div>
    <el-form :model="formData">
      <el-form-item v-for="field in formFields" :key="field.name" :label="field.label" :prop="field.name">
        <el-input v-model="formData[field.name]" :placeholder="field.placeholder"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addChildField()">添加字段</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "dynamic-form",
  data() {
    return {
      formData: {},
      formFields: []
    };
  },
  methods: {
    addChildField() {
      this.formFields.push({
        name: `field${this.formFields.length + 1}`,
        label: `字段${this.formFields.length + 1}`,
        placeholder: `请输入字段${this.formFields.length + 1}的值`
      });
    }
  }
};
</script>

这个组件中包含了一个表单和一个添加字段的按钮。在添加字段的方法中，我们向formFields数组中添加了一个新的表单元素。这个表单元素会有三个属性：名称、标签和占位符。这个方法会在每次点击“添加字段”按钮时被调用，从而实现动态生成表单的效果。

第三步：验证功能的添加

接下来，我们需要为表单添加验证功能。我们可以使用ElementUI提供的表单验证方法。在这个例子里，我们假设每个字段都必须填写，因此可以通过添加“required”属性来实现验证。

<el-form-item v-for="field in formFields" :key="field.name" :label="field.label" :prop="field.name">
  <el-input v-model="formData[field.name]" :placeholder="field.placeholder" :required="true"></el-input>
</el-form-item>

以上代码中，我们为每个input元素添加了“required”属性，表示这个元素是必填项。同时，我们还通过“prop”属性来将这个元素与表单的某个字段对应起来，这样在验证表单的时候会用到。

接下来，我们需要在“el-form”元素中添加一个“ref”属性，这个属性可以让我们在JavaScript中访问表单实例：

<el-form :model="formData" ref="form">

“ref”属性的值可以是任何的字符串，这里我用“form”，表示这个实例是表单。

最后，我们需要在“el-button”元素的点击事件中添加表单验证的逻辑：

<el-button type="primary" @click="submitForm()">提交</el-button>

在点击这个按钮时会调用submitForm方法：

methods: {
  addChildField() {
    this.formFields.push({
      name: `field${this.formFields.length + 1}`,
      label: `字段${this.formFields.length + 1}`,
      placeholder: `请输入字段${this.formFields.length + 1}的值`
    });
  },
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        alert("验证通过！");
      } else {
        alert("表单验证失败！");
        return false;
      }
    });
  }
}

在这个方法中，我们首先通过$refs方法获取到表单实例，然后调用其中的validate方法。这个方法会返回一个布尔值，表示表单是否验证通过。如果验证通过，弹出一个“验证通过”的提示框，否则弹出一个“表单验证失败”的提示框。

下面是两个代码示例：

示例1：动态添加一个表单并验证

<template>
  <div>
    <dynamic-form />
  </div>
</template>

<script>
import DynamicForm from "./DynamicForm.vue";
export default {
  name: "app",
  components: {
    DynamicForm
  }
};
</script>

在这个示例中，我们直接在Vue实例中引入了dynamic-form组件。点击“添加字段”按钮，会自动生成一个新的表单，每个表单元素都是必填项。如果填写不完整，会弹出一个“表单验证失败”的提示框，否则会弹出一个“验证通过”的提示框。

示例2：通过按钮点击事件添加表单并验证

<template>
  <div>
    <dynamic-form ref="form" />
    <el-button type="primary" @click="submitForm()">提交表单</el-button>
  </div>
</template>

<script>
import DynamicForm from "./DynamicForm.vue";
export default {
  name: "app",
  components: {
    DynamicForm
  },
  methods: {
    submitForm() {
      this.$refs.form.submitForm();
    }
  }
};
</script>

在这个示例中，我们首先引入了dynamic-form组件，并且将这个组件的实例保存到了“$refs”属性中。接着，我们在页面中添加了一个按钮。当点击这个按钮时，会调用submitForm方法，这个方法会调用dynamic-form组件中的submitForm方法，从而实现验证表单的功能。

以上就是“Vue+Element实现动态生成新表单并添加验证功能”的完整攻略，希望能对您有所帮助！