道招

element-ui动态表单async-validate校验 please transfer a valid prop path to form item!

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

element-ui动态表单async-validate校验 please transfer a valid prop path to form item!

现在很多库,比如饿了么的element-ui的表单就是用的async-validate实现的表单校验,一般我们是这样的(以vue+element-ui为例) template
<el -form :model="dataForm" ref="dataForm" :rules="dataFormRules">
    </el><el -form-item label="名称" prop="name">
        </el><el -input v-model="dataForm.name"></el>

        <el -form-item label="版本" prop="version">
        </el><el -input v-model="dataForm.version"></el>


javascript
dataFormRules: {
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 1, max: 50, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ],
    version: [
        { required: true, message: '请填写版本', trigger: 'blur' }
    ],
},
其中el-form-item的prop属性要跟dataFormRules里面的对应才行。
当时其实每个el-form-item也可以直接定义自己的rules属性
上面的校验是很常见的,效果也很不错 但是有时我们可能场景比这复杂的多 比如我们要动态添加表单,比如配置文件增删改查参数
原谅我刚才只放了上半部分
这种怎么校验? 我事先并不知道对应的是哪个键值对,顺带讲一下这种用vue怎么实现。首先双向绑定也很显然不可能用类似dataForm.xxx的方式了。后端返回的结果很可能是这样的
{
  "code": 100,
  "msg": null,
  "data": {
    "projectName": "动态注册",
    "envName": "UAT",
    "version": "文件",
    "description": "文件描述",
    "name": "上传文件",
    "list": {
      "client.param": "application",
      "client.param2": "abcde"
    }
  }
}
这是我们只能自己处理下,当然主要是处理list 可以参考这样处理,把list变成这样的类似这样的结构
[
    {keyName:"client.param",keyValue:"application"},
    {keyName:"client.param2",keyValue:"abcde"}
]
这样我们就可以用v-for循环输出了
    <el -form-item v-for="(item,index) in dataForm.keyValues" :key="index">
      </el><el -col :span="3" slot="label">
        </el><el -button
          size="mini"
          type="danger"
          @click="handleDelete(item,index)">删除</el>

      <el -col :span="4" justify="center">键名</el>
      <el -col :span="8">
        </el><el -input label="ok" size="small" v-model="item.keyName">
        </el>

      <el -col :span="4" justify="center">键值</el>
      <el -col :span="8">
        </el><el -input label="ok2" size="small" v-model="item.keyValue">
        </el>


但是这样不够好,我们应该是一个el-input外面对应一个el-form-item 也就是应该用这种
    <el -form-item label="描述" prop="description">
      </el><el -input type="textarea" v-model="dataForm.description"></el>

    <template v-for="(item,index) in dataForm.keyValues">
        <el -button
          size="mini"
          type="danger"
            :key="'btn' + index"
          @click="handleDelete(item,index)">删除
        </el>
      <el -form-item v-for="(item2, index2) in item"
        :rules="rules"
        :prop="'keyValues.' + index + '.index2'"
        :key="index + '-' + index2">
          </el><el -input label="ok" size="small" v-model="item[index2]">
          </el>

    </template>
    <el -form-item>
      </el><el -button type="info" @click="handleAdd">新增参数</el>

const check = (rules,value,callback)=>{
  console.log('value', value)
}


data(){
    return{
        rules:[{
            validator: check, trigger:'blur'
        }],
    }
}
我们希望的是在input框移出的时候进行一些校验,就是上面的check函数,如果一切顺利的话,第二个参数value的值就应该是输入的值,然后我们就可以运用正则之类的进行处理了,但是上面的代码还是有点问题的,check方法里面输出的value是undefined,但是程序没有报错啊。 问题就出在
:prop="'keyValues.' + index + '.index2'"
我们先随意将其改成错误的,让程序报错,方便我调试定位
:prop="'keyValues' + index + '.index2fdfad'"
报错如下:Error in event handler for "el.form.blur": "Error: please transfer a valid prop path to form item!" 我们一步一步定位,定位到util.js?ca50:65上面 65行报的错,我们会发现path=keyValues0.index2fdfad并且path会两次正则替换,第一个是获取中括号[]里面的内容,第二个是将.替换掉。 实际上它的最终目的是要变成获取keyValues[0][index2]的值,简单说明下
keyValues = [
    {keyName:"client.param",keyValue:"application"},
    {keyName:"client.param2",keyValue:"abcde"}
]

index2 = keyName
index2 = keyValue
了解了套路我们就可以依次作为依据改props
:prop="'keyValues.' + index + '.' + index2"
现在我们就可以根据获取的值进行校验了
const check = (rules,value,callback)=>{
  console.log('value', value)
  if(!value === 'abc'){
    callback('输入的不是abc');
  }else{
    callback();
  }
}
更新时间:
上一篇:vue实现自定义组件的v-model双向数据绑定下一篇:修改页面的element-ui级联菜单使用

相关文章

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了