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

來源：懂視網責編：小采時間：2020-11-27 22:14:53

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

Vue使用vux-ui自定義表單驗證遇到的問題及解決方法:初學框架vue搭配vux使用發現這個UI庫使用有些力不從心。下面說說自己在表單驗證過程遇到的兩個需求問題及解決的方法。 1.使用x-input組件可知，官方只給了三種類型的is-type驗證器，分別是：email,china-name,china-mobile，其他需要自己自定義驗證

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue使用vux-ui自定義表單驗證遇到的問題及解決方法:初學框架vue搭配vux使用發現這個UI庫使用有些力不從心。下面說說自己在表單驗證過程遇到的兩個需求問題及解決的方法。 1.使用x-input組件可知，官方只給了三種類型的is-type驗證器，分別是：email,china-name,china-mobile，其他需要自己自定義驗證

初學框架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;
 }
 }
 }
 }

總結

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com