element 結(jié)合vue 在表單驗證時有值卻提示錯誤的解決辦法
更新時間：2018年01月22日 13:58:57 作者：eeolady
這篇文章主要介紹了element 結(jié)合vue 在表單驗證下，有值卻提示錯誤的解決辦法,需要的朋友可以參考下
綁定的值與規(guī)則指定的值一定要相同-------
第一步：
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
加上rules ref
第二部：
<el-form-item label="活動名稱" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>
加上prop
第三部：
rules: {
name: [
{ required: true, message: '請輸入活動名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
],
resource: [
{ required: true, message: '請選擇活動資源', trigger: 'change' }
],
}
這里加了required的話 prop的屁股后面就不用加了；這里其他的詳細驗證看文檔
第四部：點擊提交表單
（這里有一個地方切記，<el-button type="primary" @click="submitForm('ruleForm')">提交表單</el-button>這里一定要引號引起來，搞定
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
這里是驗證成功后該干嘛干嘛
} else {
console.log('error submit!!');
return false;
}
});
},
總結(jié)
以上所述是小編給大家介紹的element 結(jié)合vue 在表單驗證時有值卻提示錯誤的解決辦法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue淺析axios二次封裝與節(jié)流及防抖的實現(xiàn)
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios,?axios)，本文給大家介紹axios的二次封裝和節(jié)流與防抖2022-08-08
這篇文章主要介紹了Vue前端項目部署的三種方案,本文通過圖文并茂的形式給大家介紹的非常詳細,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue實現(xiàn)簡潔文件上傳進度條功能,實現(xiàn)原理是通過performance.now()獲取動畫的時間戳,用于創(chuàng)建流暢的動畫,結(jié)合示例代碼介紹的非常詳細,需要的朋友可以參考下2024-06-06
解決vue props傳Array/Object類型值,子組件報錯的情況
這篇文章主要介紹了解決vue props傳Array/Object類型值,子組件報錯的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vuejs如何解決瀏覽器切換頁面后setInterval計時器停止執(zhí)行的問題
setinterval()是定時調(diào)用的函數(shù),可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式,這篇文章主要給大家介紹了關(guān)于vuejs如何解決瀏覽器切換頁面后setInterval計時器停止執(zhí)行的問題,需要的朋友可以參考下2024-01-01
vue解決Not?allowed?to?load?local?resource問題的全過程
這篇文章主要給大家介紹了關(guān)于vue解決Not?allowed?to?load?local?resource問題的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-10-10
openlayers6之地圖覆蓋物overlay三種常用用法(popup彈窗marker標注text文本)
這篇文章主要介紹了openlayers6之地圖覆蓋物overlay三種常用用法(popup彈窗marker標注text文本),主要講overlay三種最常用的案例,感興趣的朋友一起看看吧2021-09-09
Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊思路詳解
這篇文章主要介紹了Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊,實現(xiàn)思路大概是通過加一個本地緩存的時間戳，通過時間戳計算指定時間內(nèi)不能點擊按鈕，具體實現(xiàn)代碼跟隨小編一起看看吧2023-12-12
這篇文章主要為大家詳細介紹了Vue動態(tài)生成表格的行和列，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
Vue父組件向子組件傳值以及data和props的區(qū)別詳解
這篇文章主要介紹了Vue父組件向子組件傳值以及data和props的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03