element form 校驗(yàn)數(shù)組每一項(xiàng)實(shí)例代碼
1.校驗(yàn)的數(shù)據(jù)結(jié)構(gòu)如下:

2.html結(jié)構(gòu)
<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: '請(qǐng)輸入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: '請(qǐng)輸入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 校驗(yàn)成功
} else {
return false;
}
});
}
4.效果

總結(jié)
以上所述是小編給大家介紹的element form 校驗(yàn)數(shù)組每一項(xiàng)實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- 基于Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)表單的校驗(yàn)功能(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式)
- 詳解element-ui 表單校驗(yàn) Rules 配置 常用黑科技
- Vue ElementUi同時(shí)校驗(yàn)多個(gè)表單(巧用new promise)
- element表單驗(yàn)證如何清除校驗(yàn)提示語
- vue elementUI 表單校驗(yàn)功能之?dāng)?shù)組多層嵌套
- Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)詳解
- element多個(gè)表單校驗(yàn)的實(shí)現(xiàn)
- 詳解基于element的區(qū)間選擇組件校驗(yàn)(交易金額)
- element中el-table中的el-input校驗(yàn)的實(shí)現(xiàn)
相關(guān)文章
formStorage 基于jquery的一個(gè)插件(存儲(chǔ)表單中元素的狀態(tài)到本地)
原理很簡(jiǎn)單,通過本地存儲(chǔ)機(jī)制(userData或者localStorage),存儲(chǔ)表單中元素的狀態(tài)到本地. 需要時(shí)可以把所存儲(chǔ)的狀態(tài)還原到表單元素上2012-01-01
jquery實(shí)現(xiàn)很酷的網(wǎng)頁頂部圖標(biāo)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)很酷的網(wǎng)頁頂部圖標(biāo)下拉菜單效果,效果非常美觀大方,通過鼠標(biāo)hover事件及頁面元素的遍歷與樣式操作實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-08-08
jQuery應(yīng)用之jQuery鏈用法實(shí)例
這篇文章主要介紹了jQuery應(yīng)用之jQuery鏈用法,實(shí)例形式分析了jQuery鏈的原理及使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能
這篇文章主要介紹了基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能的相關(guān)資料,需要的朋友可以參考下2016-04-04
JQuery異步post上傳表單數(shù)據(jù)標(biāo)準(zhǔn)化模板
這篇文章主要介紹了JQuery異步post上傳表單數(shù)據(jù)標(biāo)準(zhǔn)化模板,主要分享詳細(xì)的代碼,具有一的的知識(shí)參考性,需要的小伙伴可以參考一下2022-02-02
jQuery實(shí)現(xiàn)側(cè)邊導(dǎo)航欄及滑動(dòng)電梯效果(仿淘寶)
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實(shí)現(xiàn)側(cè)邊導(dǎo)航欄以及滑動(dòng)電梯效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手試一試2022-03-03
jQuery實(shí)現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果,需要的朋友可以參考下2016-12-12

