解決vue+ element ui 表單驗證有值但驗證失敗問題

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

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

一.如圖：有值但是驗證失敗

二.

<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'}
  ]
 }
}
}

以上是正確的驗證例子。

三.

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

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

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

2.在data{}里面沒有聲明變量也會導致驗證失敗，使獲取的值value值為undefined。

總結

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

您可能感興趣的文章:

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