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