vue.js element-ui validate中代碼不執(zhí)行問題解決方法
先說結(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中form表單禁用專用組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue.js實(shí)現(xiàn)簡單ToDoList 前期準(zhǔn)備（一）
這篇文章主要介紹了Vue.js實(shí)現(xiàn)簡單ToDoList的前期準(zhǔn)備,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能詳解
這篇文章主要介紹了Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)C#有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-12-12
vue3?+?antv/x6實(shí)現(xiàn)流程圖的全過程
隨著互聯(lián)網(wǎng)的發(fā)展,越來越多的應(yīng)用需要實(shí)現(xiàn)流程圖的制作,如工作流程圖、電路圖等,文中通過代碼以及圖文將實(shí)現(xiàn)的過程介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06
vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式
這篇文章主要介紹了vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
深入理解Vue keep-alive及實(shí)踐總結(jié)
這篇文章主要介紹了深入理解Vue keep-alive及實(shí)踐總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue.js 實(shí)現(xiàn)點(diǎn)擊展開收起動(dòng)畫效果
這篇文章主要介紹了vue.js 實(shí)現(xiàn)點(diǎn)擊展開收起動(dòng)畫效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue中使用geobuf的示例詳細(xì)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04
解決vue項(xiàng)目,npm run build后,報(bào)路徑錯(cuò)的問題
這篇文章主要介紹了解決vue項(xiàng)目,npm run build后,報(bào)路徑錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue實(shí)現(xiàn)文字上下滾動(dòng)動(dòng)畫的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)超酷文字上下滾動(dòng)動(dòng)畫,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-03-03