elementUI的rules表单自定义验证validator方法如何传递其他更多参数

用elementUI自带的rules验证form表单时，自定义验证方法validator中只能传递原来的三个参数(rule,value,callback)，但有时我们需要传递更多参数用来做验证，而且rules验证方法也不是直接就写在当前页面，大多数是统一在一个公共的验证js文件里面写验证方法，这样就需要将当前页面的$refs.form对象传递到验证方法，比如在做验证两次输入密码是否一致时就遇到这个问题，解决问题的办法很简单，直接上代码：

export default{ data(){ return { msgForm:{ password:"", passwordOnce:'', passwordTwice:'', }, rules:{ passwordOnce:[{ validator:(rule,value,callback)=>{ this.$verify.passwordOnce(rule,value,callback,this.msgForm,this.$refs.userMsgForm) }, trigger:"change" }], passwordTwice:[{ validator:(rule,value,callback)=>{ this.$verify.passwordTwice(rule,value,callback,this.msgForm,this.$refs.userMsgForm) }, trigger:"change" }] } } } }

其实就是将validator在当前页面写成function形式，再在这个function里面接收原来的参数以及加入自己想要的参数，这里的$verify是小编自己项目自定义的vue验证插件，改成你自己的就好了

ok，传参问题已经解决，没其他问题的同学可以关闭页面了，下面顺便解答下两次输入密码不一致验证如何来做，也是很多朋友问到的问题：

HTML部分:

<el-form :model="msgForm" :rules="rules" label-width="150px" ref="userMsgForm"> <el-form-item label="密码" prop="passwordOnce"> <el-input auto-complete="new-password" clearable="" placeholder="请输入密码" type="password" v-model="msgForm.passwordOnce"></el-input> </el-form-item> <el-form-item label="确认密码" prop="passwordTwice"> <el-input auto-complete="new-password" clearable="" placeholder="请再次输入密码" type="password" v-model="msgForm.passwordTwice"></el-input> </el-form-item> </el-form>

js部分：

//template页面部分： export default { data(){ return { msgForm:{ password:"", passwordOnce:'', passwordTwice:'', }, rules:{ passwordOnce:[{ validator:(rule,value,callback)=>{ this.$verify.passwordOnce(value,callback,this.msgForm,this.$refs.userMsgForm) }, trigger:"change" }], passwordTwice:[{ validator:(rule,value,callback)=>{ this.$verify.passwordTwice(value,callback,this.msgForm,this.$refs.userMsgForm) }, trigger:"change" }] } } }, props:['msgData'], mounted(){ this.msgForm=JSON.parse(JSON.stringify(this.msgData));//避免双绑 this.$set(this.msgForm,'passwordOnce',this.msgData.password);//未声明变量需要这样写才可编辑 this.$set(this.msgForm,'passwordTwice',this.msgData.password) } } //验证js文件部分： import Vue from 'vue' const customValiate={ install(Vue){ Vue.prototype.$verify={ passwordOnce:(value,callback,$msgForm,$userMsgForm)=>{ if(value){ value = value.trim(); if(value.length < 6 || value.length > 20){ return callback(new Error("请输入密码，6-20位")); }else{ $userMsgForm.validateField('passwordTwice') return callback(); } }else{ return callback(new Error("请输入密码，6-20位")); } }, passwordTwice:(value,callback,$msgForm,$userMsgForm)=>{ if(value){ value = value.trim(); if(value.length < 6 || value.length > 20){ return callback(new Error("请输入密码，6-20位")); }else if($msgForm.passwordTwice!=$msgForm.passwordOnce){ return callback(new Error("两次输入密码不一致")); }else{ return callback(); } }else{ return callback(new Error("请输入密码，6-20位")); } } } } } Vue.use(customValiate)

有了上面传参问题的解决，两个密码验证方法就能都拿到passwordOnce和passwordTwice的值，可以随时进行比较进行报错，还有一句很关键的代码：

$userMsgForm.validateField('passwordTwice')

这句代码意思是单个执行form的passwordTwice值的验证方法，这样做的好处就是不用两个密码输入框都是提示“两次输入密码不一致”，只在第二个输入框提示，使得提示简洁有条理。

还有一个问题就是在给form赋值回填的时候，如果是直接给form表对应的对象赋值this.msgForm=this.msgData；而请求回来的msgData对象中没有passwordOnce和passwordTwice两个参数的话会 导致报错undifined，并且如果直接给passwordOnce和passwordTwice赋值：

this.msgForm.passwordOnce = this.msgData.password; this.msgForm.passwordTwice= this.msgData.password;

这样赋值会导致input输入框无法修改、输入、编辑，因为vue中挂载完还未声明的变量是没有getter/setter的，要这么写：

 this.$set(this.msgForm,'passwordOnce',this.msgData.password); this.$set(this.msgForm,'passwordTwice',this.msgData.password);

好了，传参、两次密码一致问题都解决了