vue+element-ui 在form表单中动态验证v-for循环遍历出来的表单元素

vue+element-ui 在form表单中动态验证v-for循环遍历出来的表单元素

在form表单中做url验证，但是input框是动态数组可添加的，渲染时使用v-for遍历数组生成对应数量的input输入框，此时使用表单验证，他只会绑定在第一个渲染的input上，此时就需要使用到from的动态验证
要渲染的表单input结构如下

 <el-form-item label="标签">
          <div v-for="(item, index) in form.input" :key="index">
            <el-form-item :prop="'input.'+index+'.value'" :rules="rules.checkUrl">
              <el-input v-model="item.value" clearable />
            </el-form-item>
          </div>
  </el-form-item>

script的结构如下：

data(){
 return {
 	form: {
 		input: [{ value: "" }, { value: "" }, { value: "" }]
 	},
 	rules: {
		checkUrl: [{ validator: this.validateUrl, trigger: 'blur' }]
	}
 }
},
methods: {
	validateUrl(rule, value, callback) {
      	const reg = /^(http|ftp|https):\/\//
     	if (reg.test(value) === true) {
        	callback()
      	} else {
        	callback(new Error('请输入正确的Url'))
      	}
	}
}

这样就可以实现每个input框都有属于自己的表单验证，不会再出现表单验证时只对第一个input起效的情况
实现效果图如下：