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: '請輸入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 校驗(yàn)成功 } else { return false; } }); }
4.效果
總結(jié)
以上所述是小編給大家介紹的element form 校驗(yàn)數(shù)組每一項(xiàng)實(shí)例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
- 基于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表單嵌套表格并對每行進(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)文章
Jquery結(jié)合HTML5實(shí)現(xiàn)文件上傳
本文給大家介紹的是利用Jquery使用HTML5的FormData屬性實(shí)現(xiàn)對文件的上傳的方法和實(shí)例,非常的實(shí)用,有需要的小伙伴可以參考下。2015-06-06jQuery EasyUI NumberBox(數(shù)字框)的用法
jQuery EasyUI 數(shù)字框(NumberBox)用法2010-07-07基于Jquery和CSS3制作數(shù)字時(shí)鐘附源碼下載(CSS3篇)
數(shù)字時(shí)鐘在web倒計(jì)時(shí),web鬧鐘效果以及基于html5的web app中,本文給大家介紹基于jquery和css3制作數(shù)字時(shí)鐘附源碼下載,感興趣的朋友來看看吧2015-11-11jQuery實(shí)現(xiàn)的動(dòng)態(tài)伸縮導(dǎo)航菜單實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的動(dòng)態(tài)伸縮導(dǎo)航菜單,實(shí)例分析了jQuery鼠標(biāo)事件及animate、hide等方法的使用技巧,需要的朋友可以參考下2015-05-05jQuery實(shí)現(xiàn)當(dāng)拉動(dòng)滾動(dòng)條到底部加載數(shù)據(jù)的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)當(dāng)拉動(dòng)滾動(dòng)條到底部加載數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了jQuery針對滾動(dòng)事件的監(jiān)聽、響應(yīng)及數(shù)據(jù)加載相關(guān)操作技巧,需要的朋友可以參考下2019-01-01傳遞參數(shù)的標(biāo)準(zhǔn)方法(jQuery.ajax)
jQuery.ajax傳遞參數(shù)的方法2008-11-11