首頁  >  文章  >  web前端  >  如何使用vux-ui自訂表單驗證

如何使用vux-ui自訂表單驗證

php中世界最好的语言
php中世界最好的语言原創
2018-05-30 14:39:243328瀏覽

這次帶給大家如何使用vux-ui自訂表單驗證,使用vux-ui自訂表單驗證的注意事項有哪些,以下就是實戰案例,一起來看一下。

初學框架vue搭配vux使用發現這個UI函式庫使用有些力不從心。以下說說自己在表單驗證過程遇到的兩個需求問題及解決的方法。

1.使用x-input元件可知,官方只給了三種類型的is-type驗證器,分別是:email,china-name,china-mobile,其他需要自己自訂驗證器,怎麼寫驗證器?

解決方法:自訂is-type驗證器(試驗過可以在valid使用正規驗證)

<x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" />
export default {
  data() {
    return{
      code: '',
      codeValue: function(value){
        return {
          valid: value.length === 4,
          msg: "验证码有误!"
        }
      }
    }
  }
}

2.表單內容都填入無誤之後,提交表單的按鈕才能被觸發(如圖)

解決方法:使用x-input元件的@on-change事件,及ref屬性

<x-input type="number" v-model="code" placeholder="请输入验证码" :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: "验证码有误!"
          }
        }
      }
    },
    methods: {
      keyDown(){
        if(this.$refs.refcode.valid == true && this.code != ''){
          this.disabled = false;
        }else{
          this.disabled = true;
        }
      }
    }
  }

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Angular路由內路由守衛該如何使用

React如何在react-router路由實現登陸驗證控制

以上是如何使用vux-ui自訂表單驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn