vue+element實現(xiàn)表單校驗功能
更新時間：2019年05月20日 16:41:23 作者：浚琦
這篇文章主要介紹了vue+element表單校驗功能,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
要實現(xiàn)這個功能其實并不難,element組件直接用就可以,
但是我在使用過程中碰到了幾個坑,就記錄下來,分享給大家,避免落坑,話不多說,直接上過程......
表單校驗功能:
實現(xiàn)這個功能,總共分為以下4布:
1.在el-form標(biāo)簽中定義:rules="rules";ref="reference"
2.在el-form-item定義prop="name";
3.在選項data中定義rules校驗規(guī)則;
4.在提交方法中檢查用戶行為
template代碼:
<el-form
:model="Opinion"
ref="MyOpinion"
:rules="rules"
size="small"
class="lj-form lj-form-s1"
>
<el-form-item label="審核意見: " prop="txt" style="margin-bottom:25px;">
<el-input type="textarea" :rows="5" v-model="Opinion.txt"></el-input>
</el-form-item>
</el-form>
data定義數(shù)據(jù)代碼:
data() {
return {
Opinion: {
radio: "1",
txt: "",
value: ""
},
rules: {
txt: [{ required: true, message: "請輸入審核意見", trigger: "blur" }]
}
};
},
methods方法代碼:
async approval() {
let _this = this;
this.$refs.MyOpinion.validate(async valid => {
if (valid) {
const res2 = await _this.$axios.post(`/approve/approve_refuse`, {
...obj
});
if (res2.data.error == 0) {
_this.$message.success(res2.data.message);
}
_this.innerVisible = false;
_this.visibleApply = false;
}
});
}
注意點:①定義prop的時候,值要求是屬于form綁定的model數(shù)據(jù)對象里面,同時名字要一樣;
②data中定義rules要在定義表單的數(shù)據(jù)之后(我一般放在data的最后面)
總結(jié)
以上所述是小編給大家介紹的vue+element實現(xiàn)表單校驗功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
今天小編就為大家分享一篇vue點擊自增和求和的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家介紹了如何編寫Vue插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue+antd實現(xiàn)折疊與展開組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
Vue前端如何設(shè)置Cookie和鑒權(quán)問題詳解
這篇文章主要介紹了前端如何設(shè)置和使用Cookie,并對比了Cookie和Token在鑒權(quán)中的優(yōu)缺點,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
本篇文章主要介紹了Vue組件通信實踐記錄（推薦），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)計算器計算效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語法,很少講實際的應(yīng)用場景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實際使用的相關(guān)資料,需要的朋友可以參考下2022-01-01
使用Vue3封裝實現(xiàn)支持Base64導(dǎo)出的電子簽名組件
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝實現(xiàn)支持Base64導(dǎo)出的電子簽名組件的相關(guān)知識,文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下2025-03-03
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue+iview實現(xiàn)手機(jī)號分段輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03