使用elementUI表單校驗函數validate需要注意的坑及解決

更新時間：2024年06月07日 10:37:14 作者：**之火

這篇文章主要介紹了使用elementUI表單校驗函數validate需要注意的坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

使用elementUI表單校驗函數validate需要注意的坑

elementUI表單校驗需要使用到自定義校驗規(guī)則，官網提供的API函數validate入參就一個回調函數，函數參數是返回校驗結果（true/false）和校驗字段名稱prop,詳見elementUI官網。

現(xiàn)在要講的是自定義校驗規(guī)則函數，即規(guī)則對象中的屬性validator。

自定義函數的入參有三個，分別是rule,value和callback；其中rule是返回定義的規(guī)則對象，value是當前校驗控件的狀態(tài)值，callback是一個校驗結果的回調方法。

直接上圖：

圖中指出存在的坑

為什么寫if(!value)return;這段代碼呢，那是因為，當控件如果沒有輸入任何字符而觸發(fā)事件時的處理，開始以為直接return就可以了，結果引起校驗的其他意想不到的異常?。。。?/p>

后面查了相關資料才知道，這個自定義校驗函數必須返回一個回調函數“callback”!! 即圖中下邊的 callback();

返回callback的入參為空代表校驗通過規(guī)則，返回含new Error（‘自定義提示’）入參代表校驗不通過規(guī)則。

elementUI表單驗證validate

elementUI的form組件里對validate給出的解釋是：validate接收一個回調函數，或返回 Promise

通俗點說，validate方法的參數可以是一個回調函數，也可以為空(為空時返回Promise對象,沒啥用)

1.參數為回調函數時，該回調函數有兩個參數，分別是是否校驗成功和未通過校驗字段，該回調函數會在校驗結束后被調用

表單.validate(回調函數(是否校驗成功,未通過校驗的字段){
  if(是否校驗成功){// 校驗成功
    //成功后的操作
  }else{ // 校驗失敗
		// 校驗失敗后的操作
    }
})
 
//非空校驗例子
  formRef.value.validate(function (valid, msg) {
    if (valid) {
      console.log(valid, msg);
      //valid值為false
       //msg值為對象 
        a: {message: '該字段不能為空', fieldValue: null, field: 'a'}
    } else {
      console.log(valid, msg);
       //valid值為true
       //msg值為一個空對象 
    }
  });