欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2018年05月10日 10:55:29   作者:Lucia_Huang  
這篇文章主要介紹了Vue使用vux-ui自定義表單驗(yàn)證遇到的問題及解決方法,需要的朋友可以參考下

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

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="請輸入驗(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="請輸入驗(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)證遇到的問題及解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue3+Koa2實(shí)現(xiàn)圖片上傳功能的示例代碼

    Vue3+Koa2實(shí)現(xiàn)圖片上傳功能的示例代碼

    這篇文章主要為大家詳細(xì)介紹了如何使用Vue3和Koa2實(shí)現(xiàn)圖片上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-02-02
  • VUE腳手架框架編寫簡潔的登錄界面的實(shí)現(xiàn)

    VUE腳手架框架編寫簡潔的登錄界面的實(shí)現(xiàn)

    本文主要介紹了VUE腳手架框架編寫簡潔的登錄界面的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • vue前端實(shí)現(xiàn)導(dǎo)出頁面為pdf(分頁導(dǎo)出、不分頁導(dǎo)出及分模塊導(dǎo)出)

    vue前端實(shí)現(xiàn)導(dǎo)出頁面為pdf(分頁導(dǎo)出、不分頁導(dǎo)出及分模塊導(dǎo)出)

    在實(shí)際應(yīng)用中可能用戶希望將系統(tǒng)中一個頁面展示的所有數(shù)據(jù)報表,用PDF的文件格式下載下來,以便于其他用途,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)導(dǎo)出頁面為pdf(分頁導(dǎo)出、不分頁導(dǎo)出及分模塊導(dǎo)出)的相關(guān)資料,需要的朋友可以參考下
    2024-06-06
  • 使用elementUI的表格table給列添加樣式

    使用elementUI的表格table給列添加樣式

    這篇文章主要介紹了使用elementUI的表格table給列添加樣式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue安裝與環(huán)境配置步驟詳解

    Vue安裝與環(huán)境配置步驟詳解

    在開始學(xué)習(xí)vue的時候,對于新手安裝這個環(huán)境是真的搞人心態(tài),不友好,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與環(huán)境配置的相關(guān)資料,需要的朋友可以參考下
    2022-07-07
  • vue 的 Render 函數(shù)

    vue 的 Render 函數(shù)

    Vue 推薦在絕大多數(shù)情況下使用模板來創(chuàng)建你的 HTML。然而在一些場景中,你真的需要 JavaScript 的完全編程的能力。這時你可以用渲染函數(shù),它比模板更接近編譯器。下面就和小編一起來學(xué)習(xí)下面文章內(nèi)容吧
    2021-09-09
  • vant之van-list的使用及踩坑記錄

    vant之van-list的使用及踩坑記錄

    這篇文章主要介紹了vant之van-list的使用及踩坑記錄,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • el-table如何添加loading效果

    el-table如何添加loading效果

    這篇文章主要介紹了el-table如何添加loading效果問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • Vue之mixin全局的用法詳解

    Vue之mixin全局的用法詳解

    這篇文章主要介紹了Vue之mixin全局的用法詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 詳解Vue 非父子組件通信方法(非Vuex)

    詳解Vue 非父子組件通信方法(非Vuex)

    本篇文章主要介紹了詳解Vue 非父子組件通信方法(非Vuex),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05

最新評論