欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element表單驗證如何清除校驗提示語

 更新時間：2021年10月01日 08:46:55   作者：文化不夠臥槽來湊  
本文主要介紹了element表單驗證如何清除校驗提示語，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

問題場景：

最近在進(jìn)行項目開發(fā)的時候，遇到了這樣的一個問題：
對表單域中的數(shù)據(jù)進(jìn)行校驗的時候，其中有一項比較特殊，不是簡單的輸入框，下拉框這些表單元素，而是自己寫的一個el-table的選擇彈窗，我對它的校驗如如下：

protocolId: [
   { required: true, message: '請選擇解析協(xié)議', trigger: 'blur'},
],

這樣可以實(shí)現(xiàn)校驗功能，但是會存在一個問題，如果觸發(fā)的了校驗條件（提交按鈕），提示了錯誤信息，后續(xù)即使重新選擇了數(shù)據(jù)，錯誤信息依舊會存在，因為沒有再次點(diǎn)擊提交按鈕，觸發(fā)校驗。這樣用戶體驗就不是太好。


解決方案：

1. 對字段進(jìn)行單獨(dú)校驗

點(diǎn)擊保存按鈕觸發(fā)校驗，一般都是校驗所有的字段，element-ui中的form表單組件還提供了校驗一個字段的函數(shù)，使用方式如下：

this.$refs.addForm.validateField('protocolId', (valid) => {
 	//valid返回的是規(guī)則集中寫的錯誤提示信息，如果滿足條件，返回的就是空
     if(!valid){
         return 
     }
 })

上面這段代碼可以放在確認(rèn)數(shù)據(jù)選擇的函數(shù)中執(zhí)行，這樣就對這一項特殊的內(nèi)容再次進(jìn)行了校驗，如果符合檢驗規(guī)則，錯誤提示就是消失了。

2. 直接清除表單域下該字段的提示信息

this.$refs.addForm.clearValidate();

這個方法就是直接清除錯誤信息，不做任何判斷，個人不是太推薦使用

到此這篇關(guān)于element表單驗證如何清除校驗提示語的文章就介紹到這了,更多相關(guān)element表單驗證清除校驗提示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue中動態(tài)修改animation效果無效問題詳情

    vue中動態(tài)修改animation效果無效問題詳情

    這篇文章主要介紹了vue中動態(tài)修改animation效果無效問題詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
    2022-06-06
  • vue+element_ui上傳文件,并傳遞額外參數(shù)操作

    vue+element_ui上傳文件,并傳遞額外參數(shù)操作

    這篇文章主要介紹了vue+element_ui上傳文件,并傳遞額外參數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-12-12
  • 基于Vue3實(shí)現(xiàn)旋轉(zhuǎn)木馬動畫效果

    基于Vue3實(shí)現(xiàn)旋轉(zhuǎn)木馬動畫效果

    這篇文章主要為大家介紹了如何利用Vue3實(shí)現(xiàn)旋轉(zhuǎn)木馬的動畫效果，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定的幫助，需要的可以參考一下
    2022-05-05
  • Vue+ElementUI?實(shí)現(xiàn)分頁功能-mysql數(shù)據(jù)

    Vue+ElementUI?實(shí)現(xiàn)分頁功能-mysql數(shù)據(jù)

    這篇文章主要介紹了Vue+ElementUI?實(shí)現(xiàn)分頁查詢-mysql數(shù)據(jù)，當(dāng)數(shù)據(jù)庫中數(shù)據(jù)比較多時,就每次只查詢一部分來緩解服務(wù)器和頁面壓力。這里使用elementui的?Pagination?分頁?組件,配合mysql的limit語句，實(shí)現(xiàn)分頁查詢mysql數(shù)據(jù),下面來看看具體實(shí)現(xiàn)過程,希望對大家學(xué)習(xí)有所幫助
    2021-12-12
  • 基于vue-ssr服務(wù)端渲染入門詳解

    基于vue-ssr服務(wù)端渲染入門詳解

    這篇文章主要介紹了基于vue-ssr服務(wù)端渲染入門詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • Vue雙向綁定詳解

    Vue雙向綁定詳解

    這篇文章主要介紹了Vue 實(shí)現(xiàn)雙向綁定的四種方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧，希望能夠給你帶來幫助
    2021-11-11
  • Vue-router 切換組件頁面時進(jìn)入進(jìn)出動畫方法

    Vue-router 切換組件頁面時進(jìn)入進(jìn)出動畫方法

    今天小編就為大家分享一篇Vue-router 切換組件頁面時進(jìn)入進(jìn)出動畫方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能

    vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能

    這篇文章主要為大家介紹了vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-02-02
  • vue混入mixin流程與優(yōu)缺點(diǎn)詳解

    vue混入mixin流程與優(yōu)缺點(diǎn)詳解

    混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被“混合”進(jìn)入該組件本身的選項
    2022-09-09
  • vue3自定義指令實(shí)現(xiàn)按鈕防抖示例詳解

    vue3自定義指令實(shí)現(xiàn)按鈕防抖示例詳解

    這篇文章主要為大家介紹了vue3自定義指令實(shí)現(xiàn)按鈕防抖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-02-02

最新評論