溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-08-20 14:33:11 來源：腳本之家 閱讀：356 作者：Lucia_Huang 欄目：web開發(fā)

初學(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="請輸入驗(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ā)（如圖）

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

解決方法：使用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)證遇到的問題及解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手