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