天天看點

表單編輯時el-form的validate方法執行無效,阻塞代碼運作 - Element UI踩坑記錄

今天在用element-ui寫管理背景需求時,遇到一個奇怪的問題

一個正常帶校驗的表單,在新增清單資料時表單校驗功能正常;

但是在新增之後再去編輯資料時,表單校驗卻失效了,甚至阻塞了後續的代碼執行,控制台卻沒有任何報錯資訊,這讓我感到非常奇怪

附上表單校驗處代碼

表單編輯時el-form的validate方法執行無效,阻塞代碼運作 - Element UI踩坑記錄

在validate方法回調函數的第一行列印了日志,控制台沒有任何輸出,說明代碼沒有執行。

查閱了element文檔以及度娘,有說是自定義校驗方法的問題,但是把自定義校驗相關代碼及相關表單項都删除後問題還是沒有解決。

各種嘗試之後,最後發現是時間日期選擇器這塊的問題

表單編輯時el-form的validate方法執行無效,阻塞代碼運作 - Element UI踩坑記錄
表單編輯時el-form的validate方法執行無效,阻塞代碼運作 - Element UI踩坑記錄

校驗規則rules中兩個時間日期選擇器的規則中帶了type:date屬性,把它删掉即可解決編輯時整個表單校驗方法不生效問題。

新增和編輯時所賦的值及類型都相同,問題出在編輯時,具體原因還在探究過程中。

繼續閱讀