问题描述:表单中有一个数据的校验需要改表单另外一个数据来进行校验判断,并且该validate的方法不在该vue文件,是在另一个公共的JS文件里面的,现在需要将参数传过去并进行校验 修改前
要在这个基础上做到传参
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:网上有挺多的,但是很多都不符合该情况,而且试了好几个会提示报错什么的,所以就记录一下,方便后续使用的时候查找