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

更新時(shí)間：2023年04月13日 14:41:27 作者：保持好運(yùn)

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

問題描述

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

解決辦法

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

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

resetFields() 方法：對(duì)整個(gè)表單進(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() 方法：移除表單項(xiàng)的校驗(yàn)結(jié)果。傳入待移除的表單項(xiàng)的 prop 屬性或者 prop 組成的數(shù)組，如不傳則移除整個(gè)表單的校驗(yàn)結(jié)果。

//1.清除所有表單項(xiàng)的驗(yàn)證提示信息
this.$nextTick(()=>{
    this.$refs.form.clearValidate();
})
//2.清除某一表單項(xiàng)的驗(yàn)證提示信息，如手機(jī)號(hào)
this.$nextTick(()=>{
    this.$refs.form.clearValidate(['phone']);
})

注：clearValidate()方法使用清除某一表單項(xiàng)的提示信息時(shí)，注意安裝的Element Ui版本：Element Ui^2.4.3及后續(xù)版本才支持傳入?yún)?shù)。

2.2 清除表單驗(yàn)證提示信息和字段值

resetFields() 方法：對(duì)整個(gè)表單進(jìn)行重置，將所有字段值重置為初始值并移除校驗(yàn)結(jié)果。

this.$nextTick(()=>{
    this.$refs.form.resetFields();
})

注意

想要清除信息的字段必須添加prop屬性。
prop :對(duì)應(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: