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