快捷導(dǎo)航

解決vue+ element ui 表單驗(yàn)證有值但驗(yàn)證失敗問題

更新時(shí)間：2020年01月16日 08:34:46 作者：ExcuMe

這篇文章主要介紹了vue+ element ui 表單驗(yàn)證有值但驗(yàn)證失敗，本文通過實(shí)例代碼給大家分享解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一.如圖：有值但是驗(yàn)證失敗

二.

<el-form :model="form" :rules="rules">
<el-form-item label="數(shù)據(jù)模板" prop="template" >
 <el-col :span="20">
  <el-input type="textarea" v-model="form.template" :rows="8" placeholder="請輸入數(shù)據(jù)模板" :readonly="true" ></el-input>
 </el-col>
</el-form-item>
</el-form>
export default {
data() {
 return {
  form: {
   template: null
  }
  rules: [
   template:{required: true, message: '數(shù)據(jù)模板不能為空', trigger: 'blur'}
  ]
 }
}
}

以上是正確的驗(yàn)證例子。

三.

目前碰到兩種情況會(huì)導(dǎo)致驗(yàn)證失敗，而且使用自定義驗(yàn)證形式的時(shí)候發(fā)現(xiàn)value的值為undefined：

1.prop和v-model的值名稱不一致

1必須和2名稱保持一致，3處的變量也需和2處的prop保持一致

2.在data{}里面沒有聲明變量也會(huì)導(dǎo)致驗(yàn)證失敗，使獲取的值value值為undefined。

總結(jié)

以上所述是小編給大家介紹的解決vue+ element ui 表單驗(yàn)證有值但驗(yàn)證失敗問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Vue3使用ECharts實(shí)現(xiàn)?；鶊D的代碼示例
桑基圖是一種用于直觀顯示流向數(shù)據(jù)的可視化工具,特別適合展示復(fù)雜的網(wǎng)絡(luò)關(guān)系和資源流動(dòng),在前端項(xiàng)目中,通過結(jié)合?Vue?3?和?ECharts,可以快速實(shí)現(xiàn)交互性強(qiáng)、樣式美觀的?；鶊D,本文將通過完整的代碼示例,帶你一步步完成一個(gè)桑基圖的實(shí)現(xiàn),需要的朋友可以參考下
2025-01-01
Vue實(shí)現(xiàn)數(shù)字動(dòng)畫的幾種方案
本文介紹了三種使用Vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)字動(dòng)畫的方案：使用Vue的響應(yīng)式數(shù)據(jù)與`setInterval`逐步更新數(shù)字,通過Vue的動(dòng)畫API和CSS動(dòng)畫效果為數(shù)字增加過渡效果,以及使用更高效的`requestAnimationFrame`來提供更加流暢的動(dòng)畫表現(xiàn),每種方案都詳細(xì)說明了原理、實(shí)現(xiàn)步驟和代碼示例
2025-02-02
解決vue addRoutes不生效問題
這篇文章主要介紹了解決vue addRoutes不生效問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue3使用useMouseInElement實(shí)現(xiàn)圖片局部放大預(yù)覽效果實(shí)例代碼
現(xiàn)在很多的項(xiàng)目里面圖片展示縮略圖,然后點(diǎn)擊實(shí)現(xiàn)圖片預(yù)覽,放大的功能,下面這篇文章主要給大家介紹了關(guān)于vue3使用useMouseInElement實(shí)現(xiàn)圖片局部放大預(yù)覽效果的相關(guān)資料,需要的朋友可以參考下
2023-03-03
vue實(shí)現(xiàn)瀑布流組件滑動(dòng)加載更多
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)瀑布流組件滑動(dòng)加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
Vue.js基礎(chǔ)知識(shí)小結(jié)
本文主要介紹了Vue.js的相關(guān)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
vue+iview 實(shí)現(xiàn)可編輯表格的示例代碼
這篇文章主要介紹了vue+iview 實(shí)現(xiàn)可編輯表格的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-10-10
uniapp嵌套webview無法返回上一級(jí)解決方式
uniapp是一款非常強(qiáng)大的跨平臺(tái)開發(fā)框架,它可以讓我們只編寫一份代碼,就能在多個(gè)平臺(tái)上運(yùn)行,這篇文章主要給大家介紹了關(guān)于uniapp嵌套webview無法返回上一級(jí)的解決方式,需要的朋友可以參考下
2024-05-05
Vue2 輪播圖slide組件實(shí)例代碼
這篇文章主要介紹了Vue2 輪播圖slide組件實(shí)例代碼,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-05-05