el-form-item validate传参问题

40 阅读1分钟

问题描述:表单中有一个数据的校验需要改表单另外一个数据来进行校验判断,并且该validate的方法不在该vue文件,是在另一个公共的JS文件里面的,现在需要将参数传过去并进行校验 修改前

image.png

要在这个基础上做到传参

vue文件主要是el-form-item单独给一个规则rule,validate里面调用JS文件中的方法,以及传参过去


 <el-form ref="currentUser"  label-width="165px" :model="currentUser" :rules="userRules">
     ...
     <el-form-item label="密码:" prop="password" :rules="passwordRule">
            <el-input v-model="currentUser.password" type="'password" clearable>
            </el-input>
            
        </el-form-item>
 
 </el-form>
 
 
 <script>
 import  {validatePass} from './Common';
 export default {
   data: function () {
    return {
      currentUser:{}, // 该对象数据是接口返回
      passwordRule:[
          { required: true, validator:(rule, value, callback)=>{
            // 这里就能传vue当前页面的数据给到引用common.js中的validatePass方法
            validatePass(rule, value, callback, this.currentUser)
          }, trigger: 'change'}
      ],
     }
   }
 }
 
 ....
 
 </script>

JS文件中的方法就是接受参数并作校验的详细操作(下面具体的校验规则就没详细写,主要说明拿到其他数据参数)

export function validatePass(rule,value,callback,userName){
    console.log('进来lelele-------');
    console.log(rule, value, userName); // 这里就能拿到传过来的参数
    ...

    if (!value) {
        return callback(new Error('必填')) // 可以判断为空提示
    } 
    else{
        ...
        callback()
        ...
    }
}

PS:网上有挺多的,但是很多都不符合该情况,而且试了好几个会提示报错什么的,所以就记录一下,方便后续使用的时候查找