1.功能需求

如果表单项里有通过v-for动态生成的表单项，如何设置验证呢？

2.Dom结构如下

表单验证的时候：

1. prop改为 “:prop”，形式为’List.’+index+’.startDate’
2. ‘List.’+index+’.startDate’就是数据结构与数据
3. 每一个循环中的都需要加：rules

<el-form :model="resumes" size="mini" :rules="rules" ref="resumes">
      <div v-for="(item, index) in resumes.List" :key="index">
        <el-form-item label="开始时间：" :prop="'List.'+ index +'.startDate'" :rules="rules.startDate">
          <el-input v-model="item.startDate" size="mini" />
        </el-form-item>
        <el-form-item label="结束时间：" :prop="'List.'+ index +'.endDate'" :rules="rules.endDate">
          <el-input v-model="item.endDate" type="password" />
        </el-form-item>
        <el-form-item label="手机号：" :prop="'List.'+ index +'.phone'" :rules="rules.phone">
          <el-input v-model="item.phone" size="mini" />
        </el-form-item>
      </div>
    </el-form>

3.data结构如下：rules为个表单项的验证规则

data() {
  return {
    resumes: {
      List: [{
        startDate: '',
        endDate: '',
        phone: ''
       }]
    },
    rules: { // 添加校验
      startDate: [{
        required: true,
        message: '请输入开始时间',
        trigger: 'blur'
       }],
      endDate: [{
        required: true,
        message: '请输入结束时间',
        trigger: 'blur'
       }],
      phone: [{
        required: true,
        message: '请输入手机号',
        trigger: 'blur'
      }],
    },
 };

以上转载原文https://www.cnblogs.com/zjianfei/p/14630278.html

4.注意点：

1.:prop="'List.'+ index +'.endDate'"的写法也可以是模板字符串

可以参考这边文章https://blog.csdn.net508742729/article/details/108286071

2.

v-for绑定的数组也必须绑定在form对象里，对应上文的resumes
也可以看这篇文章https://www.jb51.net/article/142750.htm

form: {
 activityName: '',
 status: '1',
 productGroup: [{num:"",price:""}]
}
如果是：
 
form: {
 activityName: '',
 status: '1'
},
productGroup: [{num:"",price:""}]

如果v-for绑定的数组没有放在表单里是无法验证的，这一点要注意。

以上就是全部内容了，希望对大家有帮助！