vue.js element-ui validate中代碼不執(zhí)行問題解決方法

更新時間：2017年12月18日 16:25:39 作者：知止至得

這篇文章主要介紹了vue.js element-ui validate中代碼不執(zhí)行問題解決方法,需要的朋友可以參考下

先說結(jié)論

在自定義驗證里面每一個判斷都要有callback(),就是要保證callback()一定會執(zhí)行到

因為要驗證數(shù)字，參考了官網(wǎng)參考代碼如下，發(fā)現(xiàn)有如下圖bug，當(dāng)輸入為以數(shù)字開頭包含字符串的內(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);
};

因為最開始直接刪掉了else中所有內(nèi)容，在執(zhí)行 this.$refs[formName].validate((valid) => {}) 時候，內(nèi)部代碼一直不會執(zhí)行，最后發(fā)現(xiàn)在自定義驗證里面每一個判斷都要有callback(),就是要保證callback()一定會執(zhí)行到。

總結(jié)

以上所述是小編給大家介紹的vue.js element-ui validate中代碼不執(zhí)行問題解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue打印插件vue-print-nb的實現(xiàn)代碼
這篇文章主要介紹了vue打印插件vue-print-nb的實現(xiàn),需要引入插件npm install vue-print-nb --save，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-03-03
Vue的過濾器你真了解嗎
這篇文章主要為大家詳細(xì)介紹了Vue的過濾器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
vue全局組件與局部組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue全局組件與局部組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-03-03
使用axios請求接口,幾種content-type的區(qū)別詳解
今天小編就為大家分享一篇使用axios請求接口,幾種content-type的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue2 中二級路由高亮問題及配置方法
這篇文章主要介紹了vue2 中二級路由高亮問題，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06
分離vue文件中css、js代碼的簡單技巧
這篇文章主要給大家介紹了關(guān)于分離vue文件中css、js代碼的簡單技巧,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2022-03-03
關(guān)于axios不能使用Vue.use()淺析
這篇文章主要給大家介紹了關(guān)于axios不能使用Vue.use()的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的理解和學(xué)習(xí)具有一定的參考學(xué)習(xí)價值，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
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組件的繼承與擴展
這篇文章主要介紹了詳解Vue2.0組件的繼承與擴展，主要分享slot、mixins/extends和extend的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11