解決vue+ element ui 表單驗(yàn)證有值但驗(yàn)證失敗問題
一.如圖：有值但是驗(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="請(qǐng)輸入數(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)證失敗問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
- el-element中el-table表格嵌套el-select實(shí)現(xiàn)動(dòng)態(tài)選擇對(duì)應(yīng)值功能
- vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式
- Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)詳解
- Element實(shí)現(xiàn)表格嵌套、多個(gè)表格共用一個(gè)表頭的方法
- 關(guān)于ElementPlus中的表單驗(yàn)證規(guī)則詳解
- ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別
- element表單驗(yàn)證如何清除校驗(yàn)提示語
- element 表格嵌套表單驗(yàn)證指定行的操作方法
相關(guān)文章
前端vue+elementUI如何實(shí)現(xiàn)記住密碼功能
這篇文章主要給大家介紹了關(guān)于vue+elementUI如何實(shí)現(xiàn)記住密碼功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
完美解決vue 項(xiàng)目開發(fā)越久 node_modules包越大的問題
這篇文章主要介紹了vue 項(xiàng)目開發(fā)越久 node_modules包越大的問題及解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對(duì)比(實(shí)例PK )
這篇文章主要介紹了Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對(duì)比(實(shí)例PK ),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
Vue2.x 項(xiàng)目性能優(yōu)化之代碼優(yōu)化的實(shí)現(xiàn)
這篇文章主要介紹了Vue2.x 項(xiàng)目性能優(yōu)化之代碼優(yōu)化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
如何使用 vue-cli 創(chuàng)建模板項(xiàng)目
這篇文章主要介紹了如何使用 vue-cli 創(chuàng)建模板項(xiàng)目，幫助大家更好的理解和學(xué)習(xí)vue框架的知識(shí)，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vite+vue3中如何使用router問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
關(guān)于vue-lunar-full-calendar的使用說明
這篇文章主要介紹了關(guān)于vue-lunar-full-calendar的使用說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue報(bào)錯(cuò):TypeError:?Cannot?create?property?‘xxxx‘?on的解決
這篇文章主要介紹了Vue報(bào)錯(cuò):TypeError:?Cannot?create?property?‘xxxx‘?on的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue filters過濾器的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
今天小編就為大家分享一篇vue-router 中 meta的用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11