技術標籤：VueHTMLelement-uivueelementuijavascript

與之前的校驗不同，這次遇到的需求是後臺檢驗失敗前端需要在輸入框下方顯示響應的提示(之前都是一個message盒子彈出幾秒提示)。簡單來說就是當後臺校驗不通過時,錯誤提示需要與前端校驗失敗形式相同,也就是後臺校驗失敗時前端需要自動觸發檢驗失敗並且顯示提示資訊。

先來一波效果圖

1. 在el-form-item標籤上新增error屬性，初始賦值必須為空，不然直接就展示校驗失敗的狀態。之後只需要在後臺返回校驗錯誤code時對errorMsg賦值就可以是實現需求。但是

<el-form-item prop
 
="name" :error="errorMsg">

2. 當然，如果這麼簡單也就沒必要記錄了。上述辦法還有一個細小的問題：第一次觸發之後如果後續的錯誤資訊沒有變就不會再次觸發。解決辦法也很簡單，在輸入框上繫結blur事件，將errorMsg還原為空就行了。注意: 不要繫結input事件，如果僅僅只是把游標聚焦然後失焦時，錯誤資訊會消失的(會觸發前端的表單校驗，我這裡觸發條件是失焦)，而errorMsg的值確沒有被改變，這時候再點選提交按鈕同樣不會出現錯誤提示。