vue.js element-ui validate中代碼不執(zhí)行問題解決方法
先說(shuō)結(jié)論
在自定義驗(yàn)證里面每一個(gè)判斷都要有callback(),就是要保證callback()一定會(huì)執(zhí)行到
因?yàn)橐?yàn)證數(shù)字，參考了官網(wǎng)參考代碼如下，發(fā)現(xiàn)有如下圖bug，當(dāng)輸入為以數(shù)字開頭包含字符串的內(nèi)容時(shí)，驗(yàn)證不會(huì)報(bào)錯(cuò)，因?yàn)闃I(yè)務(wù)邏輯也不相符，隨改寫代碼
<el-form-item label="年齡" prop="age">
<el-input v-model.number="ruleForm2.age"></el-input>
</el-form-item>
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年齡不能為空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('請(qǐng)輸入數(shù)字值'));
} else {
if (value < 18) {
callback(new Error('必須年滿18歲'));
} else {
callback();
}
}
}, 1000);
};
image.png
let checkNumber = (rule, value, callback) => {
if (!value) {
return callback(new Error('預(yù)存款不能為空'));
}
setTimeout(() => {
if (!Number.isInteger(Number(value))) {
callback(new Error('請(qǐng)輸入數(shù)字值'));
}
/*
else {
callback()
}
*/
}, 100);
};
因?yàn)樽铋_始直接刪掉了else中所有內(nèi)容，在執(zhí)行 this.$refs[formName].validate((valid) => {}) 時(shí)候，內(nèi)部代碼一直不會(huì)執(zhí)行，最后發(fā)現(xiàn)在自定義驗(yàn)證里面每一個(gè)判斷都要有callback(),就是要保證callback()一定會(huì)執(zhí)行到。
總結(jié)
以上所述是小編給大家介紹的vue.js element-ui validate中代碼不執(zhí)行問題解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue打印插件vue-print-nb的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue打印插件vue-print-nb的實(shí)現(xiàn),需要引入插件npm install vue-print-nb --save，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue的過(guò)濾器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要為大家詳細(xì)介紹了vue全局組件與局部組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
使用axios請(qǐng)求接口,幾種content-type的區(qū)別詳解
今天小編就為大家分享一篇使用axios請(qǐng)求接口,幾種content-type的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要介紹了vue2 中二級(jí)路由 高亮問題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要給大家介紹了關(guān)于分離vue文件中css、js代碼的簡(jiǎn)單技巧,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要給大家介紹了關(guān)于axios不能使用Vue.use()的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的理解和學(xué)習(xí)具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
說(shuō)說(shuō)如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法
這篇文章主要介紹了說(shuō)說(shuō)如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
webpack vue項(xiàng)目開發(fā)環(huán)境局域網(wǎng)訪問方法
下面小編就為大家分享一篇webpack vue項(xiàng)目開發(fā)環(huán)境局域網(wǎng)訪問方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了詳解Vue2.0組件的繼承與擴(kuò)展，主要分享slot、mixins/extends和extend的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11