element-ui的表單驗(yàn)證清除校驗(yàn)提示語(yǔ)的解決方案
問(wèn)題場(chǎng)景：
最近在進(jìn)行項(xiàng)目開(kāi)發(fā)的時(shí)候，遇到了這樣的一個(gè)問(wèn)題：
對(duì)表單域中的數(shù)據(jù)進(jìn)行校驗(yàn)的時(shí)候，其中有一項(xiàng)比較特殊，不是簡(jiǎn)單的輸入框，下拉框這些表單元素，而是自己寫(xiě)的一個(gè)el-table的選擇彈窗，我對(duì)它的校驗(yàn)如如下：
protocolId: [
{ required: true, message: '請(qǐng)選擇解析協(xié)議', trigger: 'blur'},
],這樣可以實(shí)現(xiàn)校驗(yàn)功能，但是會(huì)存在一個(gè)問(wèn)題，如果觸發(fā)的了校驗(yàn)條件（提交按鈕），提示了錯(cuò)誤信息，后續(xù)即使重新選擇了數(shù)據(jù)，錯(cuò)誤信息依舊會(huì)存在，因?yàn)闆](méi)有再次點(diǎn)擊提交按鈕，觸發(fā)校驗(yàn)。這樣用戶(hù)體驗(yàn)就不是太好。
解決方案：
1. 對(duì)字段進(jìn)行單獨(dú)校驗(yàn)
點(diǎn)擊保存按鈕觸發(fā)校驗(yàn)，一般都是校驗(yàn)所有的字段，
element-ui中的form表單組件還提供了校驗(yàn)一個(gè)字段的函數(shù)，使用方式如下：
this.$refs.addForm.validateField('protocolId', (valid) => {
//valid返回的是規(guī)則集中寫(xiě)的錯(cuò)誤提示信息，如果滿(mǎn)足條件，返回的就是空
if(!valid){
return
}
})上面這段代碼可以放在確認(rèn)數(shù)據(jù)選擇的函數(shù)中執(zhí)行，這樣就對(duì)這一項(xiàng)特殊的內(nèi)容再次進(jìn)行了校驗(yàn)，如果符合檢驗(yàn)規(guī)則，錯(cuò)誤提示就是消失了。
2. 直接清除表單域下該字段的提示信息
this.$refs.addForm.clearValidate();
這個(gè)方法就是直接清除錯(cuò)誤信息，不做任何判斷，個(gè)人不是太推薦使用
到此這篇關(guān)于element-ui的表單驗(yàn)證如何清除校驗(yàn)提示語(yǔ)的文章就介紹到這了,更多相關(guān)element-ui清除校驗(yàn)提示語(yǔ)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
el-popover放在el-table中點(diǎn)擊無(wú)反應(yīng)問(wèn)題解決方案
我們想在table中給btn加彈框但是?el-popover點(diǎn)擊按鈕沒(méi)有任何反應(yīng),解決思路是通過(guò)給每個(gè)el-popover都加上單獨(dú)的id,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-04-04
利用JavaScript實(shí)現(xiàn)時(shí)間戳功能的5種方法詳解
在現(xiàn)代軟件開(kāi)發(fā)中,時(shí)間戳是記錄時(shí)間的重要手段,在JavaScript中,通過(guò)不同的方法可以獲取當(dāng)前的時(shí)間戳,這篇文章主要介紹了利用JavaScript實(shí)現(xiàn)時(shí)間戳功能的5種方法,需要的朋友可以參考下2025-10-10
JavaScript引用類(lèi)型之基本包裝類(lèi)型實(shí)例分析【Boolean、Number和String】
這篇文章主要介紹了JavaScript引用類(lèi)型之基本包裝類(lèi)型,結(jié)合實(shí)例形式分析了javascript中Boolean、Number和String三種基本包裝類(lèi)型的基本用法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
Javascript立即執(zhí)行函數(shù)(IIFE)實(shí)例詳解
IIFE全拼Imdiately?Invoked?Function?Expression,是一個(gè)在定義的時(shí)候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
html a標(biāo)簽-超鏈接中confirm方法使用介紹
confirm可以彈出確定取消對(duì)話(huà)框，然后根據(jù)用戶(hù)的選擇執(zhí)行相應(yīng)的操作，接下來(lái)介紹實(shí)現(xiàn)過(guò)程，需要了解的朋友可以參考下2013-01-01
對(duì)支持sourceIndex的HTML文檔的節(jié)點(diǎn)重排，使用JK提供的思路，速度至少比單純使用nodes.sort(function(a,b){return a.sourceIndex - b.sourceIndex})這種方式快兩倍2011-01-01
javascript獲取隱藏dom的寬高 具體實(shí)現(xiàn)
一個(gè)隱藏的DOM是獲取不到寬高的，如果想要獲取，采用下面的方法：2013-07-07
JavaScript實(shí)現(xiàn)的使用鍵盤(pán)控制人物走動(dòng)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的使用鍵盤(pán)控制人物走動(dòng)實(shí)例,也可說(shuō)是一個(gè)JS實(shí)現(xiàn)的小人走動(dòng)小游戲,需要的朋友可以參考下2014-08-08
Javascript定義類(lèi)（class）的三種方法詳解
這篇文章主要介紹了Javascript定義類(lèi)（class）的三種方法詳解,本文講解了構(gòu)造函數(shù)法、Object.create()法、極簡(jiǎn)主義法三種方法,需要的朋友可以參考下2015-03-03
js 瀏覽本地文件夾系統(tǒng)不可思議吧，經(jīng)測(cè)試效果還是不錯(cuò)的，感興趣的朋友可以參考下2013-10-10