vue:自定义验证form表单中的数组
vue:自定义验证form表单中的数组
如图
html写法:
form元素: pictures
添加图片上传框事件:addMealImage
删除一个图片上传框事件:delMealImage
div class="flex-row el-form-item-box" style="width: 100%;">
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();
}
};