<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。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐