vue:自定义验证form表单中的数组
如图
html写法:
form元素: pictures
添加图片上传框事件:addMealImage
删除一个图片上传框事件:delMealImage
div class="flex-row el-form-item-box" style=" 100%;"> <el-form-item label="餐食主图" prop="pictures" style=" 100%;" :required="true"> <el-col style="margin-left: 10px; float: left; 100px;" v-for="(item, index) in form.pictures" :key="index"> <el-upload name="picFile" ref="resumeRefs" :headers="header" class="avatar-uploader" :action="baseURL + '/system/meal/upload/0/'+ mealId+'/'+index+''" :show-file-list="false" :auto-upload="true" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :disabled="mealEdit"> <img v-if="form.pictures[index].mealImage" :src="form.pictures[index].mealImage" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> <span v-if="index == 0" class="add-date el-icon-circle-plus-outline" style="margin-left: 25px;" title="添加图片" @click="addMealImage"> </span> <span v-if="index > 0" class="add-date el-icon-remove-outline" style="margin-left: 25px;" title="删除图片" @click="delMealImage"> </span> </el-col> </el-form-item> </div>
js部分
表单部分:给pictures初始化一个数组
// 表单参数 form: { id: null, mealName: null, mealCode: null, mealPrice: null, mealValidityStart: null, mealValidityEnd: null, flightValidityStart: null, flightValidityEnd: null, mealContent: null, mealAirport: null, mealCompany: null, mealReceiveMail: null, mealReceiveMails: [], pictures:[{mealImageType: null, mealImage: null, id: null, index:null}], //上传图片 delPictures: [],//删除的图片 },
rules部分:
pictures: [ { type: "array", validator: validateMealPicture, required: true } ],
自定义验证部分:
validateMealPicture
const validateMealPicture = (rule,value, callback)=>{ //console.log(rule) //console.log(value) let item = value.length>0?value[0]:null; if(item==null || (item!=null && item.id==null)){ return callback(new Error("请至少上传一个图片")); }else{ callback(); } };