快捷導(dǎo)航

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

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

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

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

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

解決方法：自定義is-type驗(yàn)證器（試驗(yàn)過(guò)可以在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)容都填寫(xiě)無(wú)誤之后，提交表單的按鈕才能被觸發(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)證遇到的問(wèn)題及解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue3+Koa2實(shí)現(xiàn)圖片上傳功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3和Koa2實(shí)現(xiàn)圖片上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02
VUE腳手架框架編寫(xiě)簡(jiǎn)潔的登錄界面的實(shí)現(xiàn)
本文主要介紹了VUE腳手架框架編寫(xiě)簡(jiǎn)潔的登錄界面的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為pdf(分頁(yè)導(dǎo)出、不分頁(yè)導(dǎo)出及分模塊導(dǎo)出)
在實(shí)際應(yīng)用中可能用戶(hù)希望將系統(tǒng)中一個(gè)頁(yè)面展示的所有數(shù)據(jù)報(bào)表,用PDF的文件格式下載下來(lái),以便于其他用途,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為pdf(分頁(yè)導(dǎo)出、不分頁(yè)導(dǎo)出及分模塊導(dǎo)出)的相關(guān)資料,需要的朋友可以參考下
2024-06-06
使用elementUI的表格table給列添加樣式
這篇文章主要介紹了使用elementUI的表格table給列添加樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue安裝與環(huán)境配置步驟詳解
在開(kāi)始學(xué)習(xí)vue的時(shí)候,對(duì)于新手安裝這個(gè)環(huán)境是真的搞人心態(tài),不友好,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與環(huán)境配置的相關(guān)資料,需要的朋友可以參考下
2022-07-07
vue 的 Render 函數(shù)
Vue 推薦在絕大多數(shù)情況下使用模板來(lái)創(chuàng)建你的 HTML。然而在一些場(chǎng)景中，你真的需要 JavaScript 的完全編程的能力。這時(shí)你可以用渲染函數(shù)，它比模板更接近編譯器。下面就和小編一起來(lái)學(xué)習(xí)下面文章內(nèi)容吧
2021-09-09
vant之van-list的使用及踩坑記錄
這篇文章主要介紹了vant之van-list的使用及踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
el-table如何添加loading效果
這篇文章主要介紹了el-table如何添加loading效果問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue之mixin全局的用法詳解
這篇文章主要介紹了Vue之mixin全局的用法詳解,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
詳解Vue 非父子組件通信方法（非Vuex）
本篇文章主要介紹了詳解Vue 非父子組件通信方法（非Vuex），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05