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();
      }

    };