快捷導(dǎo)航

element-ui的表單驗(yàn)證清除校驗(yàn)提示語的解決方案

更新時(shí)間：2024年01月31日 09:55:32 作者：一室易安

對(duì)表單域中的數(shù)據(jù)進(jìn)行校驗(yàn)的時(shí)候,其中有一項(xiàng)比較特殊,不是簡單的輸入框,下拉框這些表單元素,而是自己寫的一個(gè)el-table的選擇彈窗,本文給大家介紹element-ui的表單驗(yàn)證如何清除校驗(yàn)提示語,感興趣的朋友一起看看吧

問題場(chǎng)景：

最近在進(jìn)行項(xiàng)目開發(fā)的時(shí)候，遇到了這樣的一個(gè)問題：
對(duì)表單域中的數(shù)據(jù)進(jìn)行校驗(yàn)的時(shí)候，其中有一項(xiàng)比較特殊，不是簡單的輸入框，下拉框這些表單元素，而是自己寫的一個(gè)el-table的選擇彈窗，我對(duì)它的校驗(yàn)如如下：

protocolId: [
   { required: true, message: '請(qǐng)選擇解析協(xié)議', trigger: 'blur'},
],

這樣可以實(shí)現(xiàn)校驗(yàn)功能，但是會(huì)存在一個(gè)問題，如果觸發(fā)的了校驗(yàn)條件（提交按鈕），提示了錯(cuò)誤信息，后續(xù)即使重新選擇了數(shù)據(jù)，錯(cuò)誤信息依舊會(huì)存在，因?yàn)闆]有再次點(diǎn)擊提交按鈕，觸發(fā)校驗(yàn)。這樣用戶體驗(yàn)就不是太好。

初次校驗(yàn)

選擇數(shù)據(jù)以后的樣式

解決方案：

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ī)則集中寫的錯(cuò)誤提示信息，如果滿足條件，返回的就是空
     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)提示語的文章就介紹到這了,更多相關(guān)element-ui清除校驗(yàn)提示語內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: