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項(xiàng)目打包發(fā)布后接口報(bào)405錯(cuò)誤的解決
這篇文章主要介紹了vue項(xiàng)目打包發(fā)布后接口報(bào)405錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue函數(shù)input輸入值請(qǐng)求時(shí)延遲1.5秒請(qǐng)求問(wèn)題
這篇文章主要介紹了vue函數(shù)input輸入值請(qǐng)求時(shí)延遲1.5秒請(qǐng)求問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解Vue Elememt-UI構(gòu)建管理后臺(tái)
本篇文章給大家詳細(xì)分享了Vue Elememt-UI構(gòu)建管理后臺(tái)的過(guò)程以及相關(guān)代碼實(shí)例，一起參考學(xué)習(xí)下。2018-02-02
在vue中獲取微信支付code及code被占用問(wèn)題的解決方法
這篇文章主要介紹了在vue中獲取微信支付code及code被占用問(wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要介紹了如何設(shè)置Vue全局公共方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
在Vue中,路由攔截器主要用于在導(dǎo)航到某個(gè)路由前或者離開(kāi)某個(gè)路由時(shí)進(jìn)行攔截和處理,下面給大家介紹vue中的路由攔截器的作用,感興趣的朋友一起看看吧2024-07-07
vue中this.$router.go(-1)失效(路由改變了，界面未刷新)
本文主要介紹了vue中this.$router.go(-1)失效(路由改變了,界面未刷新),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
vue項(xiàng)目用后端返回的文件流實(shí)現(xiàn)docx和pdf文件預(yù)覽
本文主要介紹了vue項(xiàng)目用后端返回的文件流實(shí)現(xiàn)docx和pdf文件預(yù)覽，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue實(shí)現(xiàn)雙向綁定的方法，了解vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Vue設(shè)置瀏覽器小圖標(biāo)(ICON)的詳細(xì)步驟
vue中網(wǎng)頁(yè)圖標(biāo)默認(rèn)使用的是vue自帶的一個(gè)icon的圖標(biāo),也是vue的logo,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置瀏覽器小圖標(biāo)(ICON)的詳細(xì)步驟,需要的朋友可以參考下2023-01-01