element el-form 动态表单及自定义校验

动态表单的增加、删除和自定义校验

     
       
         
           
         
       
       
         
           
             
             
           
         
       
     
    
     

       
         
             
               
               
             
  至  
             
               
               
             
           
         
           
           
         
       
     
     
       保存
     
   

data中字段声明

ruleForm: {  // 基础信息表单
   name: "",
    state: 1,
    subList: [
      {
        startTime: "",
        endTime: "",
      },
    ],
  }

// 基础信息/表单校验
    rules: {
      name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      state: [{ required: true, message: "请选择状态", trigger: "change" }],
    },

methods

 // 保存基础信息
    submitBaseForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        	console.log('校验通过')
         }else{
         	console.log('校验不通过')
         }
      });
    },

自定义校验

// 校验开始时间
    checkStartTime(rule, value, callback) {
      let index = Number((rule.field).split('.')[1])
      const errors = []
      if (!value) {
        errors.push(new Error('请选择开始时间'))
      }else{
        let endTime = this.ruleForm.subList[index].endTime
        if(endTime && endTime.getTime() <= value.getTime()) {
          errors.push(new Error('开始时间不可大于结束时间'))
        }
      }
      
      callback(errors)
    },
    // 校验结束时间
    checkEndTime(rule, value, callback) {
      let index = Number((rule.field).split('.')[1])
      const errors = []
      if (!value) {
        errors.push(new Error('请选择结束时间'))
      }else{
        let startTime = this.ruleForm.subList[index].startTime
        if(startTime && startTime.getTime() >= value.getTime()) {
          errors.push(new Error('结束时间不可小于开始时间'))
        }
      }
      
      callback(errors)
    },