element-ui使用v-for循环el-form-item。并添加校验
<el-form ref="dataForm" :model="form" label-position="right" label-width="150px"><el-form-item label="标签"><div v-for="(item, index) in form.input" :key="index"><el-form-item :prop
<el-form ref="dataForm" :model="form" label-position="right" label-width="150px">
<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>
</el-form>
form: {
input: [{ value: "" }, { value: "" }, { value: "" }]
},
rules:{
checkUrl: [{trigger: 'blur', validator: this.validateUrl }]
},
methods: {
validateUrl(rule, value, callback) {const reg = /^(http|ftp|https):\/\//
if(value==""){
callback(new Error('请输入Url'))
}
if (reg.test(value) === true) {
callback()
} else {
callback(new Error('请输入正确的Url'))
}}
}
注意的点:
1.model不能忽视。循环的数组必须是在model的那个数据里面的。
2.prop写成动态的用index拼接。prop的名字必须是在表单的model值下面的。所以这里用form下面的input开头。如果写成别的不相关的就会报错:please transfer a valid prop path to form item!
3.校验的内容不是写在data里面定义的,而是methods。
更多推荐
所有评论(0)