Vue怎么清除Form表單校驗信息

這篇文章主要介紹“Vue怎么清除Form表單校驗信息”，在日常操作中，相信很多人在Vue怎么清除Form表單校驗信息問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue怎么清除Form表單校驗信息”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

問題描述

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

解決辦法

在控制表單顯隱的方法內加入以下代碼即可實現：

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及后續版本才支持傳入參數。

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表單校驗信息”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！