Vue之Element-UI动态表单如何进行校验

Vue+element UI的动态表单的校验(根据条件动态切换校验格式)_xigua998的博客-CSDN博客** Vue+element UI的动态表单的校验(根据条件动态切换校验格式)**1.整个表单是可新增的，所以要遍历生成；2.因为input 是动态生成的，所以检验规则也需要动态生成实现elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,因为我们是遍历生成的表单，那我们的写法就要写成:重点在prop属性<div v-for="(item,index) in formData.lists"> <el-form-item :https://blog.csdn.net/xigua998/article/details/115166996

这位大哥写的是对的，但是写的并不完整；也没有对各个参数进行说明。

请注意划线中:prop后面的几个变量，原作者并没有对它进行说明。

红线的lists 为 被循环的数组 formData的键名

黄线 index 为 v-for(item,index) 这里的遍历索引index

.concatValue 为下面el-input v-model后台绑定的item.concatValue 这里的concatValue

只有这里配置对了，才能把要校验的值正确的传到你要处理的函数哪里。

下面是另一个发的自定义函数的校验：

vue+element-ui 在form表单中动态验证v-for循环遍历出来的表单元素_哪有那么可爱的小蝈蝈的博客-CSDN博客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" https://blog.csdn.net/weixin_46869765/article/details/116274446

 

红框为自定义校验，如果你上面的 :prop里没有写对，那么你在 validateUrl的value是收到不数据的，而且VUE还会报名。