首页 > 技术文章 > form表单的验证validator如何传递参数

xhliang 2021-04-12 17:11 原文

背景:很多表单内容需要动态的添加项 如某个字段是一个数组,数组里需要增减对象,想对对象的的值进行校验或动态联动校验

config: [
  {
    age: null,
    test: null,
    number: null
  },
  {
    age: null,
    test: null,
    number: null
  }
]

方法一:

看传递的是什么参数validator本身会存在其prop的值,当prop的值是动态的 我们也可以获取到动态的内容

前提是绑定的configdata的内容,可以在方法中通过this.config[0].test拿到这个值,一般情况,当表单内容是动态添加对象,对象有多个属性,当需要关联验证时需要传递对应的index,我们可以通过下面的方法来实现;

 

<el-form-item
      label="test"
      :prop="'config['+ index +'].test"
      :rules="{
         required: true, validator: validORate
       }"
>
// 当在输入框输入内容时,打印pars是一个队形,将拼接好的prop作为key 输入的内容作为值,此时prop动态,传入的内容也是动态,可以取截取到对应的index
validORate(rule, value, callback, pars) {
      console.log('index-----', pars)  //pars----- {config[0].test: "333"}
}

 

  

方法二:通过bind 动态改变this的执行,当需要传递其他参数时可以参考,参考地址: https://blog.csdn.net/qq_42941302/article/details/112799014

 

推荐阅读