快捷導(dǎo)航

使用elementUI表單校驗(yàn)函數(shù)validate需要注意的坑及解決

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

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

使用elementUI表單校驗(yàn)函數(shù)validate需要注意的坑

elementUI表單校驗(yàn)需要使用到自定義校驗(yàn)規(guī)則，官網(wǎng)提供的API函數(shù)validate入?yún)⒕鸵粋€(gè)回調(diào)函數(shù)，函數(shù)參數(shù)是返回校驗(yàn)結(jié)果（true/false）和校驗(yàn)字段名稱prop,詳見elementUI官網(wǎng)。

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

自定義函數(shù)的入?yún)⒂腥齻€(gè)，分別是rule,value和callback；其中rule是返回定義的規(guī)則對(duì)象，value是當(dāng)前校驗(yàn)控件的狀態(tài)值，callback是一個(gè)校驗(yàn)結(jié)果的回調(diào)方法。

直接上圖：

圖中指出存在的坑

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

后面查了相關(guān)資料才知道，這個(gè)自定義校驗(yàn)函數(shù)必須返回一個(gè)回調(diào)函數(shù)“callback”!! 即圖中下邊的 callback();

返回callback的入?yún)榭沾硇ｒ?yàn)通過規(guī)則，返回含new Error（‘自定義提示’）入?yún)⒋硇ｒ?yàn)不通過規(guī)則。

elementUI表單驗(yàn)證validate

elementUI的form組件里對(duì)validate給出的解釋是：validate接收一個(gè)回調(diào)函數(shù)，或返回 Promise

通俗點(diǎn)說，validate方法的參數(shù)可以是一個(gè)回調(diào)函數(shù)，也可以為空(為空時(shí)返回Promise對(duì)象,沒啥用)

1.參數(shù)為回調(diào)函數(shù)時(shí)，該回調(diào)函數(shù)有兩個(gè)參數(shù)，分別是是否校驗(yàn)成功和未通過校驗(yàn)字段，該回調(diào)函數(shù)會(huì)在校驗(yàn)結(jié)束后被調(diào)用

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