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

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

<el-form
     :model="ruleForm"
     :rules="rules"
     ref="ruleForm"
     class="base-info-box--form"
   >
     <el-row>
       <el-col :span="12">
         <el-form-item
           label="名称："
           prop="name"
           label-width="80px"
         >
           <el-input
             v-model.trim="ruleForm.name"
             placeholder="请输入名称"
             class="hn_search_box"
             style="width: 100%"
             :maxlength="32"
           />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item
           label="状态："
           prop="state"
           label-width="140px"
           required
         >
           <el-select
             v-model="ruleForm.state"
             size="small"
             class="hn_drop_select"
             style="width: 300px"
             placeholder="请选择状态"
           >
             <el-option
               v-for="item in stateList"
               :key="item.code"
               :label="item.descn"
               :value="item.code"
             >
             </el-option>
           </el-select>
         </el-form-item>
       </el-col>
     </el-row>
    
     <div v-for="(item, index) in ruleForm.subList" style="position: relative;">
       <el-row style="display: flex;align-items: center;">
         <el-col :span="18" style="display: flex;align-items: center;">
             <el-form-item label="时间范围" label-width="100px" :key="`时间1${index}`" :prop="'subList.' + index + '.startTime'" :rules=" {validator: checkStartTime, trigger: 'change' }">
               <el-date-picker
                 v-model="item.startTime"
                 type="date"
               >
               </el-date-picker>
             </el-form-item><p style="margin: 0 10px">  至  </p>
             <el-form-item label="" :key="`时间2${index}`" :prop="'subList.' + index + '.endTime'" :rules="{ validator: checkEndTime, trigger: 'change' }">
               <el-date-picker
                 v-model="item.endTime"
                 type="date"
                 >
               </el-date-picker>
             </el-form-item>
           </el-col>
         <el-col :span="4">
           <i class="el-icon-circle-plus-outline" style="font-size:28px;cursor:pointer;color: #2272fb" @click="addPlus"></i>
           <i @click.prevent="removePlus(item)" class="el-icon-remove-outline" style="font-size:28px;cursor:pointer;color:#F56C6C"></i>
         </el-col>
       </el-row>
     </div>
     <el-row style="text-align: center">
       <el-button class="hn_bg_btn" type="" @click="submitBaseForm('ruleForm')">保存</el-button>
     </el-row>
   </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)
    },