這次帶給大家如何使用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中文網其它相關文章！
推薦閱讀：
React如何在react-router路由實現登陸驗證控制
以上是如何使用vux-ui自訂表單驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！
