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