鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vee-validate清空必填input如何不觸發(fā)驗證?

vee-validate清空必填input如何不觸發(fā)驗證?

問題是這樣的,頁面上有一個輸入框,輸入購買數(shù)量,但是購買成功后,希望清空這個輸入框:

問題:
清空框后,會自動提示驗證錯誤信息,但是并不希望這樣,改怎么處理呢?

如下:

<input type="text" name="quantity" v-validate="'required|qtyRule'" v-model.trim="qty" :placeholder="請輸入購買數(shù)量">

如下代碼模擬了用戶操作:

    this.qty = 10;//假設(shè)購買數(shù)量為10
    setTimeout(() => {
      this.qty = '';//購買成功提示,5s后清空購買數(shù)量
      
      //測試如下方式清空錯誤,但是都不成功
      //console.log(this.errors)
      //console.log(this.$validator.errors)
      //this.$validator.remove("quantity")

    }, 5000);

補充:

感覺this.$validatorthis.errors這些都是延遲對象吧,在調(diào)試的時候,this、this.$validator、this.errors都返回undefined,但是控制臺卻有輸出!

回答
編輯回答
胭脂淚

v-validate的觸發(fā)都有個事件,比如“foucs”、“blur”、“change”,
你可以改變觸發(fā)方式或者校驗規(guī)則。
也可以通過轉(zhuǎn)換標簽?zāi)J絹硪?guī)避這個問題

2018年5月1日 02:17
編輯回答
赱丅呿

我也遇到這個問題 請問樓主怎么解決的呢

2017年7月30日 18:12
編輯回答
貓小柒

找到了兩種方式:
1、動態(tài)驗證指令

v-validate="`${(alertType != 'smail' && !isShowAlertDialog) ? 'required|' : ''}quantityRule`"

這種方式缺點明顯,依賴了變量,使得邏輯更為復(fù)雜(不利于維護);并且當(dāng),依賴的變量為false時,立馬也會觸發(fā)驗證。

2、設(shè)置為空后,直接清除錯誤信息(不知道為什么,官網(wǎng)api都是clear(),而這個對象里面的方法確實clean())

this.amount = '';
this.$validator.clean();
2017年1月18日 13:47