使用element-ui动态表单做表单验证

官方给的demo

// 表单
<el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
	<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
// 表单数据
dynamicValidateForm: {
  domains: [{
    value: ''
  }]
}

有两个参数需要注意
1.prop的值格式必须是’循环的数组.’ + 下标 + ‘.数组中对应的值’，其中‘.’也是必须要的，不按格式写会报错，导致验证失败。如上代码所示dynamicValidateForm表单中的domains是要循环的数组，index是下标，value是数组的值。
2.rules必须单独绑定验证规则，直接使用Form组件上的rules是不起作用的