关于element-ui form组件自定义校验

            <el-form-item
              label="活动时间"
              prop="activityTime">
             <el-date-picker v-model={this.form.activityTime.startTime}/>
            </el-form-item>

form表单内 元素关联值为对象关键字

 

data () {
    // 活动时间校验
    const checkActivityTime = (rule, value, callback) => {
      if (!value.startTime) {
        callback('请选择活动开始时间')
      } else if (!value.endTime) {
        callback('请选择活动结束时间')
      } else if (dayjs(value.endTime).isSameOrBefore(dayjs(value.startTime))) {
        callback('结束时间不得等于或晚于当前开始时间')
      } else if (dayjs().isAfter(dayjs(value.endTime))) {
        callback('结束时间不得晚于当前时间')
      } else {
        callback()
      }
    }

    return {
      rules: {
        activityTime: [
            { required: true, validator: checkActivityTime, trigger: 'change'}
          ]
      }
    }
  },

自定义校验内容可直接在data方法中定义

validator 传入自定义校验回调参数