el-form組件清除校驗(yàn)提示正確方法(前端技能提升)
更新時(shí)間：2023年12月25日 11:39:14 作者：碼路老默007
el-form組件提供了表單驗(yàn)證的功能,可以通過在el-form上綁定rules屬性,并在el-form-item上設(shè)置prop屬性來進(jìn)行校驗(yàn),這篇文章主要給大家介紹了關(guān)于el-form組件清除校驗(yàn)提示正確方法(前端技能提升)的相關(guān)資料,需要的朋友可以參考下
錯(cuò)誤效果
錯(cuò)誤描述
在切換radio切換的時(shí)候校驗(yàn)提示提示出來了，本身不應(yīng)該出來但是如何取消呢？因?yàn)樵谇袚Q時(shí)候我們置空但是并沒有取消校驗(yàn)，所以從通過到拒絕置空時(shí)候肯定會(huì)出現(xiàn)提示語，那么我們把提示校驗(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è)陧撁媲袚Q的時(shí)候使用同一個(gè)Form組件，我們就需要把校驗(yàn)的結(jié)果給去掉，雖然不影響功能，但是頁面顯示給人感覺不太好。
到此這篇關(guān)于el-form組件清除校驗(yàn)提示正確方法的文章就介紹到這了,更多相關(guān)el-form組件清除校驗(yàn)提示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)圖書管理功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Vue組合式API如何正確解構(gòu)props不會(huì)丟失響應(yīng)性
響應(yīng)式?API?賦予了組合式?API?一大坨可能性的同時(shí),代碼精簡(jiǎn),雖然但是,我們應(yīng)該意識(shí)到響應(yīng)性的某些陷阱,比如丟失響應(yīng)性,在本文中,我們將學(xué)習(xí)如何正確解構(gòu)?Vue?組件的?props,使得?props?不會(huì)丟失響應(yīng)性2024-01-01
vue proxyTable的跨域中pathRewrite配置方式
這篇文章主要介紹了vue proxyTable的跨域中pathRewrite配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
elementui的el-popover修改樣式不生效的解決
在使用element-ui的時(shí)候，有一個(gè)常用的組件，那就是el-popover，本文就介紹一下elementui的el-popover修改樣式不生效的解決方法，感興趣的可以了解一下2021-06-06
Vue 2.5.2下axios + express 本地請(qǐng)求404的解決方法
下面小編就為大家分享一篇Vue 2.5.2下axios + express 本地請(qǐng)求404的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別淺析
最近在做自己項(xiàng)目中,做一個(gè)非常簡(jiǎn)單的新增用戶場(chǎng)景,但是使用原生axios發(fā)送post請(qǐng)求的時(shí)候,還是踩了不少坑的,下面這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-04-04
.sync修飾符算是Vue的所有修飾符中較難理解的一個(gè)，本篇文章就帶你走近.sync的世界，深入理解后會(huì)發(fā)現(xiàn)，其實(shí)也就那么回事。修飾符和指令息息相關(guān)，下面從指令 ->修飾符->.sync修飾符由淺入深地來講解 .sync的含義及用法。2021-05-05
這篇文章主要為大家介紹了Vue的自定義事件內(nèi)容分發(fā)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
最近寫vue的一個(gè)練手項(xiàng)目需要在里面實(shí)現(xiàn)一個(gè)輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個(gè)插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下2022-01-01
Vue的elementUI實(shí)現(xiàn)自定義主題方法
下面小編就為大家分享一篇Vue的elementUI實(shí)現(xiàn)自定義主題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02