iview自定义表单验证多表单同时验证阿星小栈

本文主要是介绍iview自定义表单验证多表单同时验证阿星小栈，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、自定义验证

 data () {const validateSectionFileType = (rule, value, callback) => {if (value <= 0) {callback(new Error('类型不能为空'));} else {callback();}};const validateSectionTime = (rule, value, callback) => {if (value === '') {callback(new Error('时间不能为空'));} else {callback();}};const validateSectionDuration = (rule, value, callback) => {if (!value) {callback(new Error('时间不能为空'));} else {callback();}};const validateSectionIsFree = (rule, value, callback) => {if (value === '') {callback(new Error('请选择是否收费'));} else {callback();}};return {ruleEditSection: {title: [{required: true, message: '小节标题不能为空', trigger: 'blur'}],subTitle: [{required: true, message: '小节副标题不能为空', trigger: 'blur'}],duration: [{ required: true,type: Number, message: '请填写持续时间', trigger: 'blur', validator: validateSectionDuration},],startTime: [{ required: true,message: '请选择开始时间',type: String , trigger: 'change', validator: validateSectionTime},],sectionDesc: [{ required: true,required: true, message: '小节介绍不能为空', trigger: 'blur'}],type: [{ required: true,message: '请选择类型',type: Number | String, trigger: 'change', validator: validateSectionFileType},],sectionUrl: [{required: true, message: '文件不能为空', trigger: 'change'}],isFree: [{ required: true, message: '请选择是否免费',type: Number | String,  trigger: 'blur', validator: validateSectionIsFree}]}};},

二、v-for 多表单同时验证

 <div class="form-item width-95" v-for="(section, index) in sectionLists"><Card><Form :label-width="100" ref="sectionLists" :model="section" :rules="ruleEditSection"><FormItem label="小节标题" class="width-24" prop="title">。。。。。。</FormItem></Form></Card></div>

 for (let i = 0; i < this.sectionLists.length; i++) {let validateStatus = false;this.$refs['sectionLists'+i].validate((valid)if (!validateStatus) {console.log(i)return false;}}this.$refs[].validate((valid)
this.$refs[].validate((valid)

　此时ref里面是待验证数组