溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
初學框架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自定義表單驗證遇到的問題及解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
