首先展示正確的格式(以驗證是否為空為例):
html代碼塊:
-
<el-form :model="nodeName(數組名)" ref="nodeName(數組名)">
-
<el-form-item prop="name(數組內的屬性)" label="內容:" :rules="[{ required: true, message: '不能為空'}]">
-
<el-input type="name(數組內的屬性)" v-model="nodeName.name(數組內的屬性)"></el-input>
-
-
js代碼塊:
-
-
-
-
-
-
-
-
前端展示(輸入內容后顯示為空消失):
下面開始總結常見的問題以及功能失效的原因.
1. input左側出現星號,內容為空卻不提醒
原因:已經寫好了驗證功能,但是沒有綁定到input框 .
解決方法:是<el-form-item>標簽加入prop="數組內要驗證的屬性"或者<el-input>標簽中加入type="數組內要驗證的屬性".
2.input框里已經有內容,但還是顯示不能為空
(一)原因:input有數據,但是表單沒有驗證到.
解決方法:給<el-form>綁定整個數組.v-model="newName".
(二)原因:表單驗證綁定的不是數組,只是一個單純的ojbect或者number或者char類型
如此種情況,無論輸入什么都會提示為空.
解決方法:將綁定驗證內容變成數組【也可以把表單驗證寫在data里面】
[表單驗證只能綁定數組,如果單純綁定一個數值,會出現驗證不到的現象發生]!!!!!!!!!
3.提交表單按鈕無法驗證以及符合驗證的表單內容,也就是提交失敗.
此情況一般報錯為兩個:
Element-ui官方樣式表單提交函數功能是這樣展示的:
-
-
this.$refs[newName].validate((valid) => {
-
-
-
-
console.log('error submit!!');
-
-
-
-
我們可以看到方法是this.$refs[數組名].validate(() =>{})或者this.$refs.數組名.validate(() =>{})這樣一個函數.
如果你用的html5或者是其他不顯示參數的集成工具,代碼是這樣的:
并不知道這個this.$refs有沒有真正的請求到,如果你用的顯示參數的集成工具(如phpstorm),如果你的代碼正確,會這樣顯示:
我們看到會多顯示一個callback,這就說明this.$refs生效了.
所以不管你使用說明軟件寫的代碼,如果出現表單驗證提交錯誤.也就是現實開頭那兩個錯誤.你就先輸入console.log(this.$ref.newName)[此處的newName是你自己綁定的數組]
看看輸出是一個對象還是undefine.顯示這個對象說明this.$refs.newName請求成功.
如果顯示undefine,可以這樣改正:
(一)你的代碼格式書寫錯誤,請比照上文有紅箭頭的圖正確案例改正格式.
(二)你的<el-form>未綁定ref,請給<el-form>標簽綁定ref="newName"[此處的newName是你自己綁定的數組]
出現表單驗證錯誤先比對案例 ,然后再按照自己的具體代碼綁定自己的數據.
[注:Element-ui的表單驗證一定是綁定的數組類型]
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計(m.91whvog3.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。
關鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發