Vue 清除Form表單校驗信息的解決方法(清除表單驗證上次提示信息)
更新時間：2023年04月13日 14:41:27 作者：保持好運
這篇文章主要介紹了Vue 清除Form表單校驗信息的解決方法(清除表單驗證上次提示信息),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
問題描述
在Vue項目中使用Form組件進行表單驗證，再次打開該表單時，上次的驗證提示信息依然存在，業(yè)務場景要求再次打開該表單時清除驗證提示信息和綁定的數據。
解決辦法
在控制表單顯隱的方法內加入以下代碼即可實現：
1.使用Iview中的Form組件：清除表單的驗證提示信息與字段值
resetFields() 方法：對整個表單進行重置，將所有字段值重置為空并移除校驗結果。
//form指的是綁定到Form組件上的屬性ref
this.$nextTick(()=>{
this.$refs.form.resetFields();
})Iview組件庫中沒有提供clearValidate()方法，不要和Element Ui混淆。
2.使用Element Ui中的Form組件
2.1 只清除表單驗證提示信息，不清除字段值
clearValidate() 方法：移除表單項的校驗結果。傳入待移除的表單項的 prop 屬性或者 prop 組成的數組，如不傳則移除整個表單的校驗結果。
//1.清除所有表單項的驗證提示信息
this.$nextTick(()=>{
this.$refs.form.clearValidate();
})
//2.清除某一表單項的驗證提示信息，如手機號
this.$nextTick(()=>{
this.$refs.form.clearValidate(['phone']);
})注：clearValidate()方法使用清除某一表單項的提示信息時，注意安裝的Element Ui版本：Element Ui^2.4.3及后續(xù)版本才支持傳入參數。
2.2 清除表單驗證提示信息和字段值
resetFields() 方法：對整個表單進行重置，將所有字段值重置為初始值并移除校驗結果。
this.$nextTick(()=>{
this.$refs.form.resetFields();
})注意
想要清除信息的字段必須添加prop屬性。prop :對應表單域 model 里的字段
<FormItem label="Name" prop="name">
<Input v-model="formValidate.name" placeholder="輸入您的姓名"></Input>
</FormItem>到此這篇關于Vue 清除Form表單校驗信息 清除表單驗證上次提示信息的文章就介紹到這了,更多相關Vue 清除Form表單校驗信息 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue用elementui寫form表單時,在label里添加空格操作
- vue+ElementUI 關閉對話框清空驗證,清除form表單的操作
- vue elementui el-form rules動態(tài)驗證的實例代碼詳解
- vue elementui form表單驗證的實現
- Vue ElementUI之Form表單驗證遇到的問題
- Vue3?+?elementplus實現表單驗證+上傳圖片+?防止表單重復提交功能
- vue表單驗證rules及validator驗證器的使用方法實例
- 詳談vue中的rules表單驗證(常用)
- Vue3實現登錄表單驗證功能
- vue表單驗證自定義驗證規(guī)則詳解
- vue3在table里使用elementUI的form表單驗證的示例代碼
相關文章
這篇文章主要介紹了vue組件間的通信,子組件向父組件傳值的方式匯總，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue.js中的遞歸組件是一個可以調用自己的組件,遞歸組件一般用于博客上顯示評論,形菜單或者嵌套菜單,文章主要給大家介紹了關于Vue3+TypeScript實現遞歸菜單組件的相關資料,需要的朋友可以參考下2021-08-08
使用vue.js在頁面內組件監(jiān)聽scroll事件的方法
今天小編就為大家分享一篇使用vue.js在頁面內組件監(jiān)聽scroll事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue vite之LogicFlow安裝核心依賴及項目初始化詳解
這篇文章主要為大家介紹了vue vite之LogicFlow安裝核心依賴及項目初始化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了簡單了解Vue + ElementUI后臺管理模板,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-04-04
vue項目實現會議預約功能(包含某天的某個時間段和某月的某幾天)
這篇文章主要介紹了vue項目實現會議預約功能(包含某天的某個時間段和某月的某幾天),本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要給大家介紹了關于如何解決vue3報錯:找不到模塊或其相應的類型聲明的相關資料,這個錯誤提示是指在代碼中引用了Vue模塊,但是系統找不到該模塊或者缺少相應的類型聲明文件,需要的朋友可以參考下2023-07-07
Vue?quill-editor?編輯器使用及自定義toobar示例詳解
這篇文章主要介紹了Vue quill-editor編輯器使用及自定義toobar示例詳解,這里講解編輯器quil-editor的知識結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了基于vue實現分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
provide和inject可以實現嵌套組件之間進行傳遞數據,這兩個函數都是在setup函數中使用的,下面這篇文章主要給大家介紹了關于Vue3學習筆記之依賴注入Provide?/?Inject的相關資料,需要的朋友可以參考下2023-05-05