element-ui的表單驗證清除校驗提示語的解決方案
更新時間：2024年01月31日 09:55:32 作者：一室易安
對表單域中的數(shù)據(jù)進行校驗的時候,其中有一項比較特殊,不是簡單的輸入框,下拉框這些表單元素,而是自己寫的一個el-table的選擇彈窗,本文給大家介紹element-ui的表單驗證如何清除校驗提示語,感興趣的朋友一起看看吧
問題場景：
最近在進行項目開發(fā)的時候，遇到了這樣的一個問題：
對表單域中的數(shù)據(jù)進行校驗的時候，其中有一項比較特殊，不是簡單的輸入框，下拉框這些表單元素，而是自己寫的一個el-table的選擇彈窗，我對它的校驗如如下：
protocolId: [
{ required: true, message: '請選擇解析協(xié)議', trigger: 'blur'},
],這樣可以實現(xiàn)校驗功能，但是會存在一個問題，如果觸發(fā)的了校驗條件（提交按鈕），提示了錯誤信息，后續(xù)即使重新選擇了數(shù)據(jù)，錯誤信息依舊會存在，因為沒有再次點擊提交按鈕，觸發(fā)校驗。這樣用戶體驗就不是太好。
解決方案：
1. 對字段進行單獨校驗
點擊保存按鈕觸發(fā)校驗，一般都是校驗所有的字段，
element-ui中的form表單組件還提供了校驗一個字段的函數(shù)，使用方式如下：
this.$refs.addForm.validateField('protocolId', (valid) => {
//valid返回的是規(guī)則集中寫的錯誤提示信息，如果滿足條件，返回的就是空
if(!valid){
return
}
})上面這段代碼可以放在確認數(shù)據(jù)選擇的函數(shù)中執(zhí)行，這樣就對這一項特殊的內(nèi)容再次進行了校驗，如果符合檢驗規(guī)則，錯誤提示就是消失了。
2. 直接清除表單域下該字段的提示信息
this.$refs.addForm.clearValidate();
這個方法就是直接清除錯誤信息，不做任何判斷，個人不是太推薦使用
到此這篇關(guān)于element-ui的表單驗證如何清除校驗提示語的文章就介紹到這了,更多相關(guān)element-ui清除校驗提示語內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript權(quán)威指南 學(xué)習(xí)筆記之變量作用域分享
最近一直在看《javascript權(quán)威指南 第五版》，變量作用域這一章，看得真的有點累。不過，收獲還是多多。2011-09-09
JavaScript輕松創(chuàng)建級聯(lián)函數(shù)的方法示例
級聯(lián)函數(shù)也叫鏈?zhǔn)胶瘮?shù)，方法鏈一般適合對一個對象進行連續(xù)操作 (集中在一句代碼)。一定程度上可以減少代碼量，缺點是它占用了 函數(shù)的返回值。下面這篇文章主要給大家介紹了利用JavaScript如何輕松創(chuàng)建級聯(lián)函數(shù)的方法示例,需要的朋友可以參考借鑒。2017-02-02
本文給大家分享的是使用javascript制作的2048小游戲的代碼，僅僅是想鍛煉下自己的編程代碼風(fēng)格，盡量做的規(guī)范些，小伙伴們多多給些建議。2015-03-03
這篇文章主要為大家詳細介紹了前端微信支付js代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)評論功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
在JavaScript中Click事件是一種常見的用戶交互事件,表示用戶在網(wǎng)頁上點擊某個元素的動作,這篇文章主要給大家介紹了關(guān)于Javascript中點擊(click)事件的三種寫法,需要的朋友可以參考下2024-06-06
這篇文章主要幫助大家簡單實現(xiàn)JavaScript彈幕效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
js實現(xiàn)rem自動匹配計算font-size的示例
本篇文章主要介紹了js實現(xiàn)rem自動匹配計算font-size的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Ext JS動態(tài)加載JavaScript創(chuàng)建窗體的方法
這篇文章主要介紹了Ext JS動態(tài)加載JavaScript創(chuàng)建窗體的方法 ,需要的朋友可以參考下2016-06-06
web-view是一個可以用來承載網(wǎng)頁的容器,會自動鋪滿整個小程序頁面,這篇文章主要給大家介紹了關(guān)于微信小程序在web-view頁面增加一個按鈕的具體代碼,需要的朋友可以參考下2023-10-10