vue+element實(shí)現(xiàn)表單校驗(yàn)功能
要實(shí)現(xiàn)這個(gè)功能其實(shí)并不難,element組件直接用就可以,
但是我在使用過(guò)程中碰到了幾個(gè)坑,就記錄下來(lái),分享給大家,避免落坑,話不多說(shuō),直接上過(guò)程......
表單校驗(yàn)功能:
實(shí)現(xiàn)這個(gè)功能,總共分為以下4布:
1.在el-form標(biāo)簽中定義:rules="rules";ref="reference"
2.在el-form-item定義prop="name";
3.在選項(xiàng)data中定義rules校驗(yàn)規(guī)則;
4.在提交方法中檢查用戶行為
template代碼:
<el-form
:model="Opinion"
ref="MyOpinion"
:rules="rules"
size="small"
class="lj-form lj-form-s1"
>
<el-form-item label="審核意見(jiàn): " 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: "請(qǐng)輸入審核意見(jiàn)", 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;
}
});
}
注意點(diǎn):①定義prop的時(shí)候,值要求是屬于form綁定的model數(shù)據(jù)對(duì)象里面,同時(shí)名字要一樣;
②data中定義rules要在定義表單的數(shù)據(jù)之后(我一般放在data的最后面)
總結(jié)
以上所述是小編給大家介紹的vue+element實(shí)現(xiàn)表單校驗(yàn)功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
今天小編就為大家分享一篇vue點(diǎn)擊自增和求和的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要為大家介紹了如何編寫(xiě)Vue插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
vue+antd實(shí)現(xiàn)折疊與展開(kāi)組件
這篇文章主要為大家詳細(xì)介紹了vue+antd實(shí)現(xiàn)折疊與展開(kāi)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
Vue前端如何設(shè)置Cookie和鑒權(quán)問(wèn)題詳解
這篇文章主要介紹了前端如何設(shè)置和使用Cookie,并對(duì)比了Cookie和Token在鑒權(quán)中的優(yōu)缺點(diǎn),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
本篇文章主要介紹了Vue組件通信實(shí)踐記錄（推薦），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語(yǔ)法,很少講實(shí)際的應(yīng)用場(chǎng)景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實(shí)際使用的相關(guān)資料,需要的朋友可以參考下2022-01-01
使用Vue3封裝實(shí)現(xiàn)支持Base64導(dǎo)出的電子簽名組件
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝實(shí)現(xiàn)支持Base64導(dǎo)出的電子簽名組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下2025-03-03
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue+iview實(shí)現(xiàn)手機(jī)號(hào)分段輸入框
這篇文章主要為大家詳細(xì)介紹了vue+iview實(shí)現(xiàn)手機(jī)號(hào)分段輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03