Vue 清除Form表單校驗信息的解決方法(清除表單驗證上次提示信息)
問題描述
在Vue項目中使用Form組件進(jìn)行表單驗證，再次打開該表單時，上次的驗證提示信息依然存在，業(yè)務(wù)場景要求再次打開該表單時清除驗證提示信息和綁定的數(shù)據(jù)。
解決辦法
在控制表單顯隱的方法內(nèi)加入以下代碼即可實現(xiàn)：
1.使用Iview中的Form組件：清除表單的驗證提示信息與字段值
resetFields() 方法：對整個表單進(jìn)行重置，將所有字段值重置為空并移除校驗結(jié)果。
//form指的是綁定到Form組件上的屬性ref
this.$nextTick(()=>{
this.$refs.form.resetFields();
})Iview組件庫中沒有提供clearValidate()方法，不要和Element Ui混淆。
2.使用Element Ui中的Form組件
2.1 只清除表單驗證提示信息，不清除字段值
clearValidate() 方法：移除表單項的校驗結(jié)果。傳入待移除的表單項的 prop 屬性或者 prop 組成的數(shù)組，如不傳則移除整個表單的校驗結(jié)果。
//1.清除所有表單項的驗證提示信息
this.$nextTick(()=>{
this.$refs.form.clearValidate();
})
//2.清除某一表單項的驗證提示信息，如手機號
this.$nextTick(()=>{
this.$refs.form.clearValidate(['phone']);
})注：clearValidate()方法使用清除某一表單項的提示信息時，注意安裝的Element Ui版本：Element Ui^2.4.3及后續(xù)版本才支持傳入?yún)?shù)。
2.2 清除表單驗證提示信息和字段值
resetFields() 方法：對整個表單進(jì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表單校驗信息 清除表單驗證上次提示信息的文章就介紹到這了,更多相關(guān)Vue 清除Form表單校驗信息 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue用elementui寫form表單時,在label里添加空格操作
- vue+ElementUI 關(guān)閉對話框清空驗證,清除form表單的操作
- vue elementui el-form rules動態(tài)驗證的實例代碼詳解
- vue elementui form表單驗證的實現(xiàn)
- Vue ElementUI之Form表單驗證遇到的問題
- Vue3?+?elementplus實現(xiàn)表單驗證+上傳圖片+?防止表單重復(fù)提交功能
- vue表單驗證rules及validator驗證器的使用方法實例
- 詳談vue中的rules表單驗證(常用)
- Vue3實現(xiàn)登錄表單驗證功能
- vue表單驗證自定義驗證規(guī)則詳解
- vue3在table里使用elementUI的form表單驗證的示例代碼
相關(guān)文章
Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例
本篇主要介紹了Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Vue3使用customRef封裝防抖函數(shù)的方法詳解
防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時間內(nèi),只響應(yīng)最后一次,如果在指定的時間內(nèi)再次觸發(fā),則重新計算時間,本文將給大家詳細(xì)的介紹一下Vue3使用customRef封裝防抖函數(shù)的方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了關(guān)于Vue實例創(chuàng)建的整體流程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
今天小編就為大家分享一篇vue 實現(xiàn)購物車總價計算，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了基于vue展開收起動畫的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue.js 2.0大家對此并不陌生吧。最令人興奮的是更新頁面的"虛擬DOM"的加入。那么對于虛擬 DOM 可以做什么呢？今天小編通過本文給大家解答下2016-10-10
Vue2.0+Vux搭建一個完整的移動webApp項目的示例
這篇文章主要介紹了Vue2.0+Vux搭建一個完整的移動webApp項目的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue.js仿hover效果的實現(xiàn)方法,結(jié)合實例形式分析了vue.js事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了Vue如何使用本地JSON文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
實例詳解Vue項目使用eslint + prettier規(guī)范代碼風(fēng)格
這篇文章主要介紹了Vue項目使用eslint + prettier規(guī)范代碼風(fēng)格,本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-08-08