<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • ui表單驗(yàn)證問題

          2024-1-5    前端達(dá)人

          首先展示正確的格式(以驗(yàn)證是否為空為例):

          html代碼塊:

           
          1.  
            <el-form :model="nodeName(數(shù)組名)" ref="nodeName(數(shù)組名)">
          2.  
            <el-form-item prop="name(數(shù)組內(nèi)的屬性)" label="內(nèi)容:" :rules="[{ required: true, message: '不能為空'}]">
          3.  
            <el-input type="name(數(shù)組內(nèi)的屬性)" v-model="nodeName.name(數(shù)組內(nèi)的屬性)"></el-input>
          4.  
            </el-form-item>
          5.  
            </el-form>
           

          js代碼塊:

           
          1.  
            data(){
          2.  
            return{
          3.  
            // 表單
          4.  
            nodeName:{
          5.  
            name:''
          6.  
            }
          7.  
            }
          8.  
            },
           

          前端展示(輸入內(nèi)容后顯示為空消失):

           

           

          下面開始總結(jié)常見的問題以及功能失效的原因.


          1. input左側(cè)出現(xiàn)星號,內(nèi)容為空卻不提醒

           

          原因:已經(jīng)寫好了驗(yàn)證功能,但是沒有綁定到input框 .

          解決方法:是<el-form-item>標(biāo)簽加入prop="數(shù)組內(nèi)要驗(yàn)證的屬性"或者<el-input>標(biāo)簽中加入type="數(shù)組內(nèi)要驗(yàn)證的屬性".

          2.input框里已經(jīng)有內(nèi)容,但還是顯示不能為空

           

          (一)原因:input有數(shù)據(jù),但是表單沒有驗(yàn)證到.

          解決方法:給<el-form>綁定整個數(shù)組.v-model="newName".

          (二)原因:表單驗(yàn)證綁定的不是數(shù)組,只是一個單純的ojbect或者number或者char類型

           如此種情況,無論輸入什么都會提示為空.

          解決方法:將綁定驗(yàn)證內(nèi)容變成數(shù)組【也可以把表單驗(yàn)證寫在data里面】

           

           

          [表單驗(yàn)證只能綁定數(shù)組,如果單純綁定一個數(shù)值,會出現(xiàn)驗(yàn)證不到的現(xiàn)象發(fā)生]!!!!!!!!!

          3.提交表單按鈕無法驗(yàn)證以及符合驗(yàn)證的表單內(nèi)容,也就是提交失敗.

          此情況一般報(bào)錯為兩個:

           

           Element-ui官方樣式表單提交函數(shù)功能是這樣展示的:

           
          1.  
            newNameBtn(newName) {
          2.  
            this.$refs[newName].validate((valid) => {
          3.  
            if (valid) {
          4.  
            alert('submit!');
          5.  
            } else {
          6.  
            console.log('error submit!!');
          7.  
            return false;
          8.  
            }
          9.  
            });
          10.  
            },
           

           我們可以看到方法是this.$refs[數(shù)組名].validate(() =>{})或者this.$refs.數(shù)組名.validate(() =>{})這樣一個函數(shù).

          如果你用的html5或者是其他不顯示參數(shù)的集成工具,代碼是這樣的:

           

           并不知道這個this.$refs有沒有真正的請求到,如果你用的顯示參數(shù)的集成工具(如phpstorm),如果你的代碼正確,會這樣顯示:

           

           我們看到會多顯示一個callback,這就說明this.$refs生效了.

          所以不管你使用說明軟件寫的代碼,如果出現(xiàn)表單驗(yàn)證提交錯誤.也就是現(xiàn)實(shí)開頭那兩個錯誤.你就先輸入console.log(this.$ref.newName)[此處的newName是你自己綁定的數(shù)組]

          看看輸出是一個對象還是undefine.顯示這個對象說明this.$refs.newName請求成功.

           

          如果顯示undefine,可以這樣改正:

          (一)你的代碼格式書寫錯誤,請比照上文有紅箭頭的圖正確案例改正格式.

          (二)你的<el-form>未綁定ref,請給<el-form>標(biāo)簽綁定ref="newName"[此處的newName是你自己綁定的數(shù)組]

           

          出現(xiàn)表單驗(yàn)證錯誤先比對案例 ,然后再按照自己的具體代碼綁定自己的數(shù)據(jù).

          [注:Element-ui的表單驗(yàn)證一定是綁定的數(shù)組類型]

           

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

           

           

          藍(lán)藍(lán)設(shè)計(jì)(m.sdgs6788.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

          關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司

          銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)軟件wpf開發(fā)軟件vue開發(fā)

           

          日歷

          鏈接

          個人資料

          存檔

          国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 伊人伊成久久人综合网777| 一本久久久久久久| 久久国产成人精品国产成人亚洲| 欧美久久久久久精选9999| 亚洲国产成人久久笫一页| 亚洲午夜无码久久久久| 精品久久777| 精品久久久久久久国产潘金莲| 青草国产精品久久久久久| 国产精品久久网| 午夜肉伦伦影院久久精品免费看国产一区二区三区| 99久久久久| 国产高潮国产高潮久久久| 色婷婷狠狠久久综合五月| 国产精品久久波多野结衣| 99久久综合国产精品免费| 国产精品女同一区二区久久| 久久精品青青草原伊人| 久久久网中文字幕| 久久综合九色综合精品| 久久久久久国产精品无码超碰| 精品久久久无码中文字幕天天| 亚洲美日韩Av中文字幕无码久久久妻妇 | 夜夜亚洲天天久久| 三级片免费观看久久| 国产精品热久久无码av| 国产精品一久久香蕉国产线看| 亚洲午夜久久久| 久久嫩草影院免费看夜色| 久久精品国产亚洲AV香蕉| 久久久精品久久久久久| 国内精品久久久久久久久 | 久久99精品久久久久久动态图| 色综合久久中文字幕综合网| 久久97久久97精品免视看秋霞| 久久亚洲私人国产精品vA| 久久精品国产亚洲AV久| 久久综合亚洲色HEZYO国产| 午夜精品久久久久久影视777| 久久99精品国产99久久6|