element form 校驗數(shù)組每一項實例代碼
更新時間:2019年10月10日 13:47:33 作者:Cynthia嬈墨舊染
這篇文章主要介紹了element form 校驗數(shù)組每一項的實例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
1.校驗的數(shù)據(jù)結構如下:

2.html結構
<el-dialog
:title="title"
:visible.sync="visable"
width="40%"
:before-close="cancel">
<el-form label-width="80px" :model="formData" :rules="formDataRules" ref="formData" >
<el-form-item label="Id" prop="id" v-if="formData.id">
{{formData.id}}
</el-form-item>
// begin ---------------------
<div v-for="(item, index) in formData.test" :key="index">
<el-form-item label="test1" :prop="`test[${index}].test1`" :rules="{ required: true, message: '請輸入test1', trigger: 'blur' }">
<el-input type="text" v-model="item.test1"></el-input>
</el-form-item>
<el-form-item label="test2" :prop="`test[${index}].test2`" :rules="{ required: true, message: '請輸入test2', trigger: 'blur' }">
<el-input type="text" v-model="item.test2"></el-input>
</el-form-item>
</div>
// end ---------------------
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save('formData')">確 定</el-button>
</div>
</el-dialog>
3.提交
save(formName: string) {
const el: any = this.$refs[formName] ;
el.validate((valid: any) => {
if (valid) {
// todo 校驗成功
} else {
return false;
}
});
}
4.效果

總結
以上所述是小編給大家介紹的element form 校驗數(shù)組每一項實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
您可能感興趣的文章:
相關文章
formStorage 基于jquery的一個插件(存儲表單中元素的狀態(tài)到本地)
原理很簡單,通過本地存儲機制(userData或者localStorage),存儲表單中元素的狀態(tài)到本地. 需要時可以把所存儲的狀態(tài)還原到表單元素上2012-01-01
jquery實現(xiàn)很酷的網(wǎng)頁頂部圖標下拉菜單效果
這篇文章主要介紹了jquery實現(xiàn)很酷的網(wǎng)頁頂部圖標下拉菜單效果,效果非常美觀大方,通過鼠標hover事件及頁面元素的遍歷與樣式操作實現(xiàn)該功能,需要的朋友可以參考下2015-08-08
JQuery異步post上傳表單數(shù)據(jù)標準化模板
這篇文章主要介紹了JQuery異步post上傳表單數(shù)據(jù)標準化模板,主要分享詳細的代碼,具有一的的知識參考性,需要的小伙伴可以參考一下2022-02-02
jQuery實現(xiàn)側邊導航欄及滑動電梯效果(仿淘寶)
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實現(xiàn)側邊導航欄以及滑動電梯效果,文中的示例代碼講解詳細,感興趣的小伙伴可以動手試一試2022-03-03
jQuery實現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果
這篇文章主要介紹了jQuery實現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果,需要的朋友可以參考下2016-12-12

