快捷導(dǎo)航

Vue使用vux-ui自定義表單驗(yàn)證遇到的問題及解決方法

更新時(shí)間：2018年05月10日 10:55:29 作者：Lucia_Huang

這篇文章主要介紹了Vue使用vux-ui自定義表單驗(yàn)證遇到的問題及解決方法,需要的朋友可以參考下

初學(xué)框架vue搭配vux使用發(fā)現(xiàn)這個(gè)UI庫使用有些力不從心。下面說說自己在表單驗(yàn)證過程遇到的兩個(gè)需求問題及解決的方法。

1.使用x-input組件可知，官方只給了三種類型的is-type驗(yàn)證器，分別是：email,china-name,china-mobile，其他需要自己自定義驗(yàn)證器，怎么寫驗(yàn)證器？

解決方法：自定義is-type驗(yàn)證器（試驗(yàn)過可以在valid使用正則驗(yàn)證）

<x-input type="number" v-model="code" placeholder="請(qǐng)輸入驗(yàn)證碼" :is-type="codeValue" />
export default {
  data() {
    return{
      code: '',
      codeValue: function(value){
        return {
          valid: value.length === 4,
          msg: "驗(yàn)證碼有誤!"
        }
      }
    }
  }
}

2.表單內(nèi)容都填寫無誤之后，提交表單的按鈕才能被觸發(fā)（如圖）

解決方法：使用x-input組件的@on-change事件，及ref屬性

<x-input type="number" v-model="code" placeholder="請(qǐng)輸入驗(yàn)證碼" :is-type="codeValue" ref="refcode" @on-change="keyDown" />
<x-button action-type="submit" :disabled="disabled">完成</x-button>
 export default {
    data() {
      return{
        code: '',
        disabled: true,
        codeValue: function(value){
          return {
            valid: value.length === 4,
            msg: "驗(yàn)證碼有誤!"
          }
        }
      }
    },
    methods: {
      keyDown(){
        if(this.$refs.refcode.valid == true && this.code != ''){
          this.disabled = false;
        }else{
          this.disabled = true;
        }
      }
    }
  }

總結(jié)

以上所述是小編給大家介紹的Vue使用vux-ui自定義表單驗(yàn)證遇到的問題及解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

VUE使用canvas實(shí)現(xiàn)簽名組件
這篇文章主要為大家詳細(xì)介紹了VUE使用canvas實(shí)現(xiàn)簽名組件，兼容PC移動(dòng)端，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
Vue2中pinia刷新后數(shù)據(jù)丟失的問題解決
Pinia是一個(gè)Vue.js狀態(tài)管理庫，如果你在組件中修改了store中的數(shù)據(jù)并刷新了界面，Pinia會(huì)將store中的數(shù)據(jù)重置為初始值，從而導(dǎo)致數(shù)據(jù)丟失的問題，本文就來介紹一下問題解決，感興趣的可以了解一下
2023-12-12
vue 中的keep-alive實(shí)例代碼
這篇文章主要介紹了vue中的keep-alive實(shí)例代碼，vue實(shí)現(xiàn)組件信息緩存的方法，在文中也給大家提到,需要的朋友可以參考下
2018-07-07
Vuex 使用及簡單實(shí)例(計(jì)數(shù)器)
這篇文章主要介紹了Vuex 使用及簡單實(shí)例(計(jì)數(shù)器)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
利用Electron簡單擼一個(gè)Markdown編輯器的方法
這篇文章主要介紹了利用Electron簡單擼一個(gè)Markdown編輯器的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-06-06
vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽器的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽器的實(shí)現(xiàn)方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-11-11
Vue彈窗Dialog最佳使用方案實(shí)戰(zhàn)
這篇文章主要為大家介紹了極度舒適的Vue彈窗Dialog最佳使用方案實(shí)戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
在vue框架下使用指令vue add element安裝element報(bào)錯(cuò)問題
這篇文章主要介紹了在vue框架下使用指令vue add element安裝element報(bào)錯(cuò)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue webpack重寫cookie路徑的方法
webpack提供的反向代理服務(wù)器在開發(fā)階段非常方便，幾行簡單的代碼配置就可以使用反向代理功能，包括路徑重寫、cookie處理等。這篇文章主要介紹了vue webpack重寫cookie路徑,需要的朋友可以參考下
2019-07-07
在Vue3中為路由Query參數(shù)標(biāo)注類型的方法
這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類型,我們就針對(duì)這個(gè)話題如何為路由Query參數(shù)標(biāo)注類型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下
2024-08-08