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);

好了，傳參、兩次密碼一致問題都解決了