element表單驗證如何清除校驗提示語

Posted on by

問題場景：

最近在進行項目開發的時候，遇到瞭這樣的一個問題：
對表單域中的數據進行校驗的時候，其中有一項比較特殊，不是簡單的輸入框，下拉框這些表單元素，而是自己寫的一個el-table的選擇彈窗，我對它的校驗如如下：

protocolId: [
   { required: true, message: '請選擇解析協議', trigger: 'blur'},
],

這樣可以實現校驗功能，但是會存在一個問題，如果觸發的瞭校驗條件（提交按鈕），提示瞭錯誤信息，後續即使重新選擇瞭數據，錯誤信息依舊會存在，因為沒有再次點擊提交按鈕，觸發校驗。這樣用戶體驗就不是太好。

解決方案：

1. 對字段進行單獨校驗

點擊保存按鈕觸發校驗，一般都是校驗所有的字段，element-ui中的form表單組件還提供瞭校驗一個字段的函數，使用方式如下：

this.$refs.addForm.validateField('protocolId', (valid) => {
 	//valid返回的是規則集中寫的錯誤提示信息，如果滿足條件，返回的就是空
     if(!valid){
         return 
     }
 })

上面這段代碼可以放在確認數據選擇的函數中執行，這樣就對這一項特殊的內容再次進行瞭校驗，如果符合檢驗規則，錯誤提示就是消失瞭。

2. 直接清除表單域下該字段的提示信息

this.$refs.addForm.clearValidate();

這個方法就是直接清除錯誤信息，不做任何判斷，個人不是太推薦使用

到此這篇關於element表單驗證如何清除校驗提示語的文章就介紹到這瞭,更多相關element表單驗證清除校驗提示內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：