初學(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ā)（如圖）
輸入框?yàn)榭諘r(shí)，“完成”按鈕狀態(tài)
輸入內(nèi)容有誤時(shí)擎淤，“完成”按鈕狀態(tài)
輸入格式正確時(shí)奢啥，“完成”按鈕狀態(tài)
解決方法：使用
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;
}
}
}
}
以上是我在使用vux表單驗(yàn)證時(shí)遇到的需求問題嘴拢，雖然不是什么難點(diǎn)桩盲，但是很實(shí)用~
有更好的方法歡迎各位留言~
