element表單驗證如何清除校驗提示語
問題場景：
最近在進(jìn)行項目開發(fā)的時候，遇到了這樣的一個問題：
對表單域中的數(shù)據(jù)進(jìn)行校驗的時候，其中有一項比較特殊，不是簡單的輸入框，下拉框這些表單元素，而是自己寫的一個el-table的選擇彈窗，我對它的校驗如如下：
protocolId: [
{ required: true, message: '請選擇解析協(xié)議', trigger: 'blur'},
],
這樣可以實現(xiàn)校驗功能，但是會存在一個問題，如果觸發(fā)的了校驗條件（提交按鈕），提示了錯誤信息，后續(xù)即使重新選擇了數(shù)據(jù)，錯誤信息依舊會存在，因為沒有再次點擊提交按鈕，觸發(fā)校驗。這樣用戶體驗就不是太好。
解決方案：
1. 對字段進(jìn)行單獨校驗
點擊保存按鈕觸發(fā)校驗，一般都是校驗所有的字段，element-ui中的form表單組件還提供了校驗一個字段的函數(shù)，使用方式如下：
this.$refs.addForm.validateField('protocolId', (valid) => {
//valid返回的是規(guī)則集中寫的錯誤提示信息，如果滿足條件，返回的就是空
if(!valid){
return
}
})
上面這段代碼可以放在確認(rèn)數(shù)據(jù)選擇的函數(shù)中執(zhí)行，這樣就對這一項特殊的內(nèi)容再次進(jìn)行了校驗，如果符合檢驗規(guī)則，錯誤提示就是消失了。
2. 直接清除表單域下該字段的提示信息
this.$refs.addForm.clearValidate();
這個方法就是直接清除錯誤信息，不做任何判斷，個人不是太推薦使用
到此這篇關(guān)于element表單驗證如何清除校驗提示語的文章就介紹到這了,更多相關(guān)element表單驗證清除校驗提示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- el-element中el-table表格嵌套el-select實現(xiàn)動態(tài)選擇對應(yīng)值功能
- vue+element表格實現(xiàn)多層數(shù)據(jù)的嵌套方式
- Vue?elementUI表單嵌套表格并對每行進(jìn)行校驗詳解
- Element實現(xiàn)表格嵌套、多個表格共用一個表頭的方法
- 關(guān)于ElementPlus中的表單驗證規(guī)則詳解
- ElementUI表單驗證validate和validateField的使用及區(qū)別
- 解決vue+ element ui 表單驗證有值但驗證失敗問題
- element 表格嵌套表單驗證指定行的操作方法
相關(guān)文章
這篇文章主要介紹了詳解vue-resource promise兼容性問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家介紹了Vue編程三部曲之模型樹優(yōu)化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
解決VUE 在IE下出現(xiàn)ReferenceError: Promise未定義的問題
這篇文章主要介紹了解決VUE 在IE下出現(xiàn)ReferenceError: Promise未定義的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在 Vue.js 中,組件之間的數(shù)據(jù)傳遞是一個常見的需求,Vue 提供了多種方法來實現(xiàn)這一目標(biāo),包括 props、全局事件總線、消息的訂閱與發(fā)布等,下面我們就來學(xué)習(xí)一下這些方法的具體實現(xiàn)吧2023-12-12
這篇文章主要介紹了vue-quill-editor的使用及個性化定制操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue中el-table實現(xiàn)無限向下滾動懶加載數(shù)據(jù)
一次性的加載全部的數(shù)據(jù),并且將其渲染到頁面上,就會導(dǎo)致頁面卡頓,往往采用分頁和無限滾動的方式來展示,本文主要介紹了vue中el-table實現(xiàn)無限向下滾動懶加載數(shù)據(jù),感興趣的可以了解一下2023-12-12
在vue項目中,輸入框只允許輸入數(shù)字,現(xiàn)將自己使用的一種方法記錄,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11
ElementUi中select框在頁面滾動時el-option超出元素區(qū)域的問題解決
本文主要介紹了ElementUi中select框在頁面滾動時el-option超出元素區(qū)域的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
vue中props賦值給data出現(xiàn)的問題及解決
這篇文章主要介紹了vue中props賦值給data出現(xiàn)的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
ElementUI中el-input無法輸入、修改及刪除問題解決辦法
這篇文章主要給大家介紹了關(guān)于ElementUI中el-input無法輸入、修改及刪除問題的解決辦法,這種問題產(chǎn)生是因為input在vue中的受控,我們需要去重新改變一下監(jiān)聽和實現(xiàn),需要的朋友可以參考下2023-11-11