腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

Vue 清除Form表單校驗信息的解決方法(清除表單驗證上次提示信息)

更新時間：2023年04月13日 14:41:27 作者：保持好運

這篇文章主要介紹了Vue 清除Form表單校驗信息的解決方法(清除表單驗證上次提示信息),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

問題描述

在Vue項目中使用Form組件進行表單驗證，再次打開該表單時，上次的驗證提示信息依然存在，業(yè)務(wù)場景要求再次打開該表單時清除驗證提示信息和綁定的數(shù)據(jù)。

解決辦法

在控制表單顯隱的方法內(nèi)加入以下代碼即可實現(xiàn)：

1.使用Iview中的Form組件：清除表單的驗證提示信息與字段值

resetFields() 方法：對整個表單進行重置，將所有字段值重置為空并移除校驗結(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() 方法：對整個表單進行重置，將所有字段值重置為初始值并移除校驗結(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频