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