快捷導(dǎo)航

element 結(jié)合vue 在表單驗(yàn)證時(shí)有值卻提示錯(cuò)誤的解決辦法

更新時(shí)間：2018年01月22日 13:58:57 作者：eeolady

這篇文章主要介紹了element 結(jié)合vue 在表單驗(yàn)證下，有值卻提示錯(cuò)誤的解決辦法,需要的朋友可以參考下

綁定的值與規(guī)則指定的值一定要相同-------

第一步：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

加上rules ref

第二部：

<el-form-item label="活動(dòng)名稱" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>

加上prop

第三部：

rules: {
name: [
{ required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
],
resource: [
{ required: true, message: '請(qǐng)選擇活動(dòng)資源', trigger: 'change' }
],
}

這里加了required的話 prop的屁股后面就不用加了；這里其他的詳細(xì)驗(yàn)證看文檔

第四部：點(diǎn)擊提交表單

（這里有一個(gè)地方切記，<el-button type="primary" @click="submitForm('ruleForm')">提交表單</el-button>這里一定要引號(hào)引起來，搞定

submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {

這里是驗(yàn)證成功后該干嘛干嘛

} else {
console.log('error submit!!');
return false;
}
});
},

總結(jié)

以上所述是小編給大家介紹的element 結(jié)合vue 在表單驗(yàn)證時(shí)有值卻提示錯(cuò)誤的解決辦法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue淺析axios二次封裝與節(jié)流及防抖的實(shí)現(xiàn)
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios,?axios)，本文給大家介紹axios的二次封裝和節(jié)流與防抖
2022-08-08
Vue前端項(xiàng)目部署的三種方案詳解
這篇文章主要介紹了Vue前端項(xiàng)目部署的三種方案,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08
vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能
這篇文章主要介紹了vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能,實(shí)現(xiàn)原理是通過performance.now()獲取動(dòng)畫的時(shí)間戳,用于創(chuàng)建流暢的動(dòng)畫,結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況
這篇文章主要介紹了解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vuejs如何解決瀏覽器切換頁面后setInterval計(jì)時(shí)器停止執(zhí)行的問題
setinterval()是定時(shí)調(diào)用的函數(shù),可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式,這篇文章主要給大家介紹了關(guān)于vuejs如何解決瀏覽器切換頁面后setInterval計(jì)時(shí)器停止執(zhí)行的問題,需要的朋友可以參考下
2024-01-01
vue解決Not?allowed?to?load?local?resource問題的全過程
這篇文章主要給大家介紹了關(guān)于vue解決Not?allowed?to?load?local?resource問題的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
openlayers6之地圖覆蓋物overlay三種常用用法(popup彈窗marker標(biāo)注text文本)
這篇文章主要介紹了openlayers6之地圖覆蓋物overlay三種常用用法(popup彈窗marker標(biāo)注text文本),主要講overlay三種最常用的案例,感興趣的朋友一起看看吧
2021-09-09
Vue?+?Element?實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊思路詳解
這篇文章主要介紹了Vue?+?Element?實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊,實(shí)現(xiàn)思路大概是通過加一個(gè)本地緩存的時(shí)間戳，通過時(shí)間戳計(jì)算指定時(shí)間內(nèi)不能點(diǎn)擊按鈕，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧
2023-12-12
Vue動(dòng)態(tài)生成表格的行和列
這篇文章主要為大家詳細(xì)介紹了Vue動(dòng)態(tài)生成表格的行和列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
Vue父組件向子組件傳值以及data和props的區(qū)別詳解
這篇文章主要介紹了Vue父組件向子組件傳值以及data和props的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03