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的屁股后面就不用加了；這里其他的詳細(xì)驗證看文檔
第四部：點擊提交表單
（這里有一個地方切記，<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)文章
優(yōu)雅的將ElementUI表格變身成樹形表格的方法步驟
這篇文章主要介紹了優(yōu)雅的將ElementUI表格變身成樹形表格的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vant Uploader實現(xiàn)上傳一張或多張圖片組件
這篇文章主要為大家詳細(xì)介紹了Vant Uploader實現(xiàn)上傳一張或多張圖片組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue+element tabs選項卡分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家介紹了Vue自定義指令，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
下面小編就為大家分享一篇Vue.js 動態(tài)為img的src賦值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue.js實現(xiàn)開發(fā)購物車功能的方法詳解
這篇文章主要介紹了Vue.js實現(xiàn)開發(fā)購物車功能的方法,結(jié)合實例形式分析了基于vue.js開發(fā)的購物車功能相關(guān)操作步驟與實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解
本文介紹如何在Vue項目中使用基于Element-UI的季度選擇器組件ElQuarterPicker,通過引用并調(diào)用ElQuarterPicker.vue組件來實現(xiàn)季度選擇功能,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue+elementui實現(xiàn)動態(tài)添加行/可編輯的table
這篇文章主要為大家詳細(xì)介紹了vue+elementui實現(xiàn)動態(tài)添加行/可編輯的table，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Vue.js基礎(chǔ)指令實例講解(各種數(shù)據(jù)綁定、表單渲染大總結(jié))
這篇文章主要為大家詳細(xì)介紹了Vue.js基礎(chǔ)指令實例，各種數(shù)據(jù)綁定、表單渲染大總結(jié)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vue3警告:Failed to resolve component:XXX的詳細(xì)解決辦法
最近在一個vue3項目中遇到了報錯,整理了些解決辦法,這篇文章主要給大家介紹了關(guān)于Vue3警告:Failed to resolve component:XXX的詳細(xì)解決辦法,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05