element form 动态循环出来的元素进行校验

亲，先看效果

image.png

简单说明

材料相关的是通过增加数组的长度属性动态创建出来的，并且校验材料名称。运单数量。签收数量必填
追重要的是需求校验签收数量不能大于运单数量

知识点

1，el-form的动态增减表单项：
循环动态建的元素属性名的书写遵循：

    删除
  

上面是重点
2，统一对象之间的输入内容关联校验
如：输入签收数量，或运单数量校验签收数量
用到el-form的methods 对部分表单字段进行校验的方法 validateField
例如：

this.$refs['defaultData'].validateField('signMaterials.' + index + '.signinQuantity')

defaultData为表单的ref ,signMaterials为变化的材料数组，index为操作的数组的当前项，signinQuantity为校验的属性

代码实现

html

 
     
      
        
          
            
              
            
          
          
            
              
                
              
            
// 设置prop属性必须这样子才能起到校验的效果
            
              
                
              
            
          
          
            
              
                累计签收量:
              
            
            
              
                {{ material.cumulativeSignShow }}{{ material.unit }}
              
            

            
              
                {{ material.controlName }}:
              
            
            
              
                {{ material.controlQuantity }}{{ material.unit }}
              
            
          
          
            
              
            
          
        
        

          
            + 添加材料
          
        
      
      
    

js

methods:{
// 1,增加数组长度，增加材料按钮
  addMaterial(){
        this.formData.signMaterials.push(JSON.parse(JSON.stringify(this.materialItem)))
      },
//2,删除材料
deleteMaterial(index){
        this.formData.signMaterials.splice(index,1)
      },
//3,校验材料名称必填且材料不能重复
       validateMaterial(rule, value, callback) {
        if (!value) {
            callback(new Error('请输入材料名称'));
        }
        let flag = 0
        this.formData.signMaterials.forEach(item => {
          if (item.materialId === value) {
            flag++
          }
        })
        if (flag >= 2) {
          callback(new Error('材料不能重复'))
          return false
        }else{
           callback();
        }
       },
//4,校验运单数量：运单数量不能超过3位小数
      validateDeliveryQuantity(rule, value, callback){
            var pattern = /^0$|^[1-9]\d{0,15}$|^[1-9]\d{0,15}\.{1}\d{1,3}$|^0\.{1}\d{1,3}$/g;
            //alert(pattern.test(value));

            if (value == null || value === '') {
                callback(new Error('请输入运单量'));
                return false;
            } else if (value < 0 || value > 100000) {
                //校验数字在0-100000之间，最多3位小数
                callback(new Error('请输入0-10万之间数字'));
                return false;
            }
            else if(!pattern.test(value)){
                callback(new Error('最多输入3位小数'));
                return false;
          }
            callback();
        },
//5,校验签收数量：签收数量不能超过3位小数
        validateSignQuantity(rule, value,callback){
            const deliveryQuantity = this.formData.signMaterials &&this.formData.signMaterials[this.currentIndex] && this.formData.signMaterials[this.currentIndex].deliveryQuantity
            var pattern = /^0$|^[1-9]\d{0,15}$|^[1-9]\d{0,15}\.{1}\d{1,3}$|^0\.{1}\d{1,3}$/g;
            //alert(pattern.test(value));
            if (value == null || value === '') {
                callback(new Error('请输入签收量'));
                return false;
            } else if (value < 0 || value > 100000) {
                //校验数字在0-100000之间，最多3位小数
                callback(new Error('请输入0-10万之间数字'));
                return false;
            }else if(!pattern.test(value)){
                callback(new Error('最多输入3位小数'));
                return false;
            }
            else if(parseFloat(value) > parseFloat(deliveryQuantity) ){
              callback(new Error('签收数量不能大于运单数量的数据'))
            }
            callback();
        },
// 5.输入运单数量手动触发校验签收数量（*本文的重点，卡了好久，主要还是对element的对部分字段校验不熟悉）
       deliveryQuantityChange($event,material,index){
         if(material.signinQuantity){
           this.currentIndex = index
           this.$refs['defaultData'].validateField('signMaterials.' + index + '.signinQuantity')
         }
        },
}