vue.js element-ui validate中代碼不執(zhí)行問題解決方法
先說結(jié)論
在自定義驗(yàn)證里面每一個判斷都要有callback(),就是要保證callback()一定會執(zhí)行到
因?yàn)橐?yàn)證數(shù)字，參考了官網(wǎng)參考代碼如下，發(fā)現(xiàn)有如下圖bug，當(dāng)輸入為以數(shù)字開頭包含字符串的內(nèi)容時，驗(yàn)證不會報(bào)錯，因?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('請輸入數(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('請輸入數(shù)字值'));
}
/*
else {
callback()
}
*/
}, 100);
};
因?yàn)樽铋_始直接刪掉了else中所有內(nèi)容，在執(zhí)行 this.$refs[formName].validate((valid) => {}) 時候，內(nèi)部代碼一直不會執(zhí)行，最后發(fā)現(xiàn)在自定義驗(yàn)證里面每一個判斷都要有callback(),就是要保證callback()一定會執(zhí)行到。
總結(jié)
以上所述是小編給大家介紹的vue.js element-ui validate中代碼不執(zhí)行問題解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue中form表單禁用專用組件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue.js實(shí)現(xiàn)簡單ToDoList 前期準(zhǔn)備（一）
這篇文章主要介紹了Vue.js實(shí)現(xiàn)簡單ToDoList的前期準(zhǔn)備,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vue?Electron實(shí)現(xiàn)輸入法自動刷字?jǐn)?shù)功能詳解
這篇文章主要介紹了Vue?Electron實(shí)現(xiàn)輸入法自動刷字?jǐn)?shù)功能，文中的示例代碼講解詳細(xì)，對我們學(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ì),對大家學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06
vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式
這篇文章主要介紹了vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
深入理解Vue keep-alive及實(shí)踐總結(jié)
這篇文章主要介紹了深入理解Vue keep-alive及實(shí)踐總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue.js 實(shí)現(xiàn)點(diǎn)擊展開收起動畫效果
這篇文章主要介紹了vue.js 實(shí)現(xiàn)點(diǎn)擊展開收起動畫效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue中使用geobuf的示例詳細(xì)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04
解決vue項(xiàng)目,npm run build后,報(bào)路徑錯的問題
這篇文章主要介紹了解決vue項(xiàng)目,npm run build后,報(bào)路徑錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)超酷文字上下滾動動畫,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考下2024-03-03