技術標籤：前端javascriptvue.jses6

elementui的表單驗證功能

表單驗證方法如果傳入回撥函式時是非同步的

// 子元件的方法
validateForm(){
      this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
        return {valid: valid, hints: hints}
      })
}

// 父元件呼叫,會發現校驗結果,hints為undefine
submitAll(){
      this.$refs.resourceEditorRef.forEach((item, index) => {
        console.log(item.validateForm())
      })
}
 

修改成同步的

// 子元件方法
validateForm(){
      // this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
      //   return {valid: valid, hints: hints}
      // })
      // return new Promise((resolve, reject) => {
      //   this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
      //     resolve({valid, hints})
      //   })
      // })
      //或者根據官網文件說明可以不傳入回撥函式,直接validate
      return this.$refs.jsonEditor.getRef("form").validate
    },

// 父元件呼叫
submitAll(){
      // this.$refs.resourceEditorRef.forEach((item, index) => {
      //   console.log("校驗結果", item.validateForm())
      // })
      this.$refs.resourceEditorRef.forEach(async (item, index) => {
        let {valid, hints} = await item.validateForm()
        console.info(valid, hints)
        console.log("校驗結果", hints)
      })
}
 

但是其實上面 submitAll 的 forEach 是有問題, 需要改成傳統的for遍歷, 因為 forEach 的入參是一個回撥函式 , 簡單的說就是執行forEach 後會馬上執行forEach後面的程式碼

所以修改成普通的for , 使用普通 for 迴圈的時候有需要多包一層

// 子元件方法
validateForm(){
      //或者根據官網文件說明可以不傳入回撥函式,直接validate
      return this.$refs.jsonEditor.getRef("form").validate
    }

//父元件呼叫
submitAll(){
      (async()=>{
        let submitAllForm = {};
        for(letindex=0;index<this.$refs.resourceEditorRef.length;index++){
          constitem=this.$refs.resourceEditorRef[index]
          awaititem.validateForm().then(res => {
            console.log("表單校驗",res)
          }).catch(res => {
            console.log("表單校驗catch",res)
            if(res == false){
              this.$message({ type: "error", message: "表單校驗失敗" });
              // 有一個校驗失敗則直接返回
              return;
            }
          })
        }
        //後續操作
        
      })()
}
 

或者

// 子元件方法
validateForm(){
      return new Promise((resolve, reject) => {
        this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
          resolve({valid, hints})
        })
      })
}

// 父呼叫
submitAll(){
      (async()=>{
        let submitAllForm = {};
        for(letindex=0;index<this.$refs.resourceEditorRef.length;index++){
          constitem=this.$refs.resourceEditorRef[index]
          let {valid, hints} = await item.validateForm();
          console.log("表單校驗valid",valid)
          console.log("表單校驗hints",hints)
          debugger
        }
        //後續操作
        debugger
      })()
}