<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • ui表單驗證問題

    2024-1-5    前端達人

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

    html代碼塊:

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

    js代碼塊:

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

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

     

     

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


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

     

    原因:已經寫好了驗證功能,但是沒有綁定到input框 .

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

    2.input框里已經有內容,但還是顯示不能為空

     

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

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

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

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

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

     

     

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

    3.提交表單按鈕無法驗證以及符合驗證的表單內容,也就是提交失敗.

    此情況一般報錯為兩個:

     

     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)表單驗證提交錯誤.也就是現(xiàn)實開頭那兩個錯誤.你就先輸入console.log(this.$ref.newName)[此處的newName是你自己綁定的數(shù)組]

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

     

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

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

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

     

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

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

     

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

    免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。

     

     

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

    關鍵詞:UI咨詢UI設計服務公司軟件界面設計公司、界面設計公司、UI設計公司UI交互設計公司數(shù)據(jù)可視化設計公司用戶體驗公司高端網站設計公司

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

     

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 午夜成人精品福利网站在线观看| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 久久97久久97精品免视看秋霞| 日产精品久久久久久久性色| 国产亚洲精品AA片在线观看不加载| 国产精品区免费视频| 欧美精品播放| 国产精品欧美久久久久天天影视| 精品乱码一区二区三区四区| 亚洲欧美一级久久精品| 国产系列高清精品第一页| 久久精品国产精品青草| 久久国产精品成人片免费| 亚洲国产一成久久精品国产成人综合 | 在线精品无码字幕无码AV| 久久99精品国产麻豆婷婷| wwwvr高清亚洲精品二区| 国产精品1区2区3区在线播放| 亚洲精品乱码久久久久久中文字幕| 黑人巨大精品欧美一区二区| 四虎精品影院永久在线播放| 97精品久久天干天天天按摩| 无码日韩人妻精品久久蜜桃 | 精品国产三级a∨在线| 中文字幕亚洲精品无码| 久久精品国产一区二区三区不卡 | 少妇亚洲免费精品| 国产精品五月天强力打造| 99RE8这里有精品热视频| 国语自产拍精品香蕉在线播放| 久久99热只有频精品8| 无码精品国产VA在线观看DVD| 亚洲精品国产福利一二区| 午夜成人精品福利网站在线观看| 日本精品一区二区三区在线视频一 | 久久精品亚洲乱码伦伦中文| 国产一在线精品一区在线观看| 国产精品无码一区二区在线观一| 国产精品高清在线观看| 国产精品男男视频一区二区三区| 国产午夜精品理论片免费观看|