Vue+Element动态生成新表单并添加验证

如下图，动态添加表单 且支持添加和删除 并进行验证

相关代码如下： data中定义如下参数

注：遍历的数组需在定义的表单对象中，否则无法验证

 data() {
    return {
      formInline: {
        formList: [
            {
                user: '',
                phone: ''
            }
        ]
      }
    }},

注：

prop(解析): 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性必填(此处做表单验证时需要)

v-for遍历循还formList数组 由于表单为动态生成，故prop=改为 :prop="定义的数组名.索引值.参数名" 例：'formList.'+i+'.phone'

此外验证规则可直接正则匹配写在:rules中

例：rules="[{ required: true,message: '必填字段不能为空'},{ pattern:/^1(3|4|5|7|8)\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }]"

  <div>
    <el-form ref="formInline" :inline="true" :model="formInline" class="demo-form-inline">
      <div v-for="(v,i) in formInline.formList" :key="i">
        <el-form-item label="demo1" :prop="'formList.'+i+'.user'" :rules="{ required: true,message: '必填字段不能为空'}">
          <el-input v-model="v.user" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="demo2" :prop="'formList.'+i+'.phone'" :rules="[{ required: true,message: '必填字段不能为空'},{ pattern:/^1(3|4|5|7|8)\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }]">
          <el-input v-model="v.phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button v-if="i===0" type="primary" @click="add()">添加</el-button>
          <el-button v-else type="danger" @click="dels(v,i)">删除</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div>
      <el-button type="primary" @click="onSubmit('formInline')">提交</el-button>
    </div>
  </div>

添加表单：

    add() {
      this.formInline.formList.push({
        user: '',
        phone: ''
      })
    },

删除表单：

    dels(v, i) {
      if (this.formInline.formList.indexOf(v) > -1) {
        this.formInline.formList.splice(i, 1)
      }
    },