el-form組件清除校驗(yàn)提示正確方法(前端技能提升)
更新時(shí)間：2023年12月25日 11:39:14 作者：碼路老默007
el-form組件提供了表單驗(yàn)證的功能,可以通過(guò)在el-form上綁定rules屬性,并在el-form-item上設(shè)置prop屬性來(lái)進(jìn)行校驗(yàn),這篇文章主要給大家介紹了關(guān)于el-form組件清除校驗(yàn)提示正確方法(前端技能提升)的相關(guān)資料,需要的朋友可以參考下
錯(cuò)誤效果
錯(cuò)誤描述
在切換radio切換的時(shí)候校驗(yàn)提示提示出來(lái)了，本身不應(yīng)該出來(lái)但是如何取消呢？因?yàn)樵谇袚Q時(shí)候我們置空但是并沒(méi)有取消校驗(yàn)，所以從通過(guò)到拒絕置空時(shí)候肯定會(huì)出現(xiàn)提示語(yǔ)，那么我們把提示校驗(yàn)的方法去掉就行了。
錯(cuò)誤代碼
reviewStateChange(val) {
if (val === '2') {
this.ruleForm.remark = ''
}
if (val === '3') {
this.ruleForm.remark = ''
}
}正確代碼
reviewStateChange(val) {
if (val === '2') {
this.ruleForm.remark = ''
}
if (val === '3') {
this.ruleForm.remark = ''
// this.$nextTick(() => {
// this.$refs.ruleForm.resetFields()
// })
this.$nextTick(() => {
this.$refs.ruleForm.clearValidate() // 只清除清除驗(yàn)證
})
}
}總結(jié)方法
①清除表單內(nèi)容和清除表單驗(yàn)證消息
this.$nextTick(()=>{
this.$refs.form.resetFields();
})
②只清除表單驗(yàn)證消息、不清楚表單內(nèi)容
this.$nextTick(()=>{
this.$refs['form'].clearValidate() // 只清除清除驗(yàn)證
})
正確樣式
場(chǎng)景延申
我們?cè)陧?yè)面切換的時(shí)候使用同一個(gè)Form組件，我們就需要把校驗(yàn)的結(jié)果給去掉，雖然不影響功能，但是頁(yè)面顯示給人感覺(jué)不太好。
到此這篇關(guān)于el-form組件清除校驗(yàn)提示正確方法的文章就介紹到這了,更多相關(guān)el-form組件清除校驗(yàn)提示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中使用mock.js模擬數(shù)據(jù)的示例詳解
前后端同時(shí)開(kāi)發(fā)的時(shí)候,后端接口數(shù)據(jù)沒(méi)有出來(lái),前端可以使用mock模擬假數(shù)據(jù),所以下面小編就來(lái)為大家詳細(xì)介紹一下如何在Vue3中使用mock.js模擬數(shù)據(jù)吧2025-03-03
解決vue 打包發(fā)布去#和頁(yè)面空白的問(wèn)題
今天小編就為大家分享一篇解決vue 打包發(fā)布去#和頁(yè)面空白的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue-router清除url地址欄路由參數(shù)的操作代碼
這篇文章主要介紹了vue-router清除url地址欄路由參數(shù),本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2015-11-11
用戶自行開(kāi)發(fā)了一個(gè)Vue登錄注冊(cè)組件,采用Bootstrap表單樣式,簡(jiǎn)單實(shí)現(xiàn)防短信轟炸功能,但因接口存在bug僅模擬了登錄注冊(cè)流程2025-07-07
Vue3+script setup+ts+Vite+Volar搭建項(xiàng)目
本文主要介紹了Vue3+script setup+ts+Vite+Volar搭建項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法
這篇文章主要介紹了關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法，實(shí)現(xiàn)方法有兩種，本文通過(guò)實(shí)例代碼對(duì)每種方法介紹的很詳細(xì)，需要的朋友參考下2018-12-12
本文詳解了Vue2父子組件通信方式：父?jìng)髯佑胮rops,子傳父用$emit；雙向綁定通過(guò).sync或v-model實(shí)現(xiàn),強(qiáng)調(diào)單向數(shù)據(jù)流原則,需注意props驗(yàn)證、避免直接修改props,合理使用修飾符與事件命名,以構(gòu)建可維護(hù)的應(yīng)用,需要的朋友可以參考下2025-09-09
vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解
這篇文章主要介紹了vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解,AJ-Captcha不需要npm安裝，只需要將組件 verifition復(fù)制到所使用的components目錄下，本文給大家詳細(xì)講解，需要的朋友可以參考下2023-05-05
vue-cli-service不是內(nèi)部或外部命令,也不是可運(yùn)行的程序或批處理文件問(wèn)題
在Vue項(xiàng)目構(gòu)建過(guò)程中,如果遇到無(wú)法識(shí)別'vue-cli-service'命令的錯(cuò)誤提示,通常是因?yàn)闆](méi)有全局安裝vue-cli,解決這個(gè)問(wèn)題的步驟主要包括：首先檢查Vue版本,如果未安裝則先安裝Vue；其次全局安裝vue-cli；若在安裝過(guò)程中遇到cnpm命令找不到的情況2024-10-10
Vue中如何對(duì)ElementUI的Dialog組件封裝
這篇文章主要介紹了Vue中如何對(duì)ElementUI的Dialog組件封裝問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03