关于vue中自定义校验规则，开始时间，结束时间分开

雨中人呀

已于 2024-04-01 15:31:33 修改

阅读量313

点赞数 2

分类专栏： vue2 + element-ui 文章标签： vue.js elementui javascript

于 2024-04-01 15:28:09 首次发布

本文链接：https://blog.csdn.net/weixin_72915006/article/details/137234578

版权

vue2 + element-ui 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.项目为vue项目，用的是element-ui框架

2.本来框架有开始结束关联的时间选择器，但是用户或者产品有时候会希望两个选择器是分开选择的，所以就需要使用到了自定义规则

<el-form-item label="培训周期" prop="trainingTime" style="width:100%">
                <el-date-picker
                v-model="ruleForm.eduStartTime"
                type="date"
                style="width: 45%"
                placeholder='开始时间'
                value-format="yyyy-MM-dd hh:mm:ss">
              </el-date-picker>


              <span style="width:1.5%; textAlign:center"> - </span>
              
              
                <el-date-picker
                v-model="ruleForm.eduEndTime"
                type="date"
                style="width: 45%"
                placeholder='结束时间'
                value-format="yyyy-MM-dd hh:mm:ss">
              </el-date-picker>
</el-form-item>


// 校验规则
var validator = (rule, value, callback) => {
      console.log(this.ruleForm.eduStartTime,this.ruleForm.eduEndTime);
        if (!this.ruleForm.eduStartTime || !this.ruleForm.eduEndTime) {
          callback(new Error('请选择日期'));
        } else if (new Date(this.ruleForm.eduStartTime).getTime() >= new Date(this.ruleForm.eduEndTime).getTime()){
          callback(new Error('开始时间要小于结束时间'));
        }else{
          const obj = [this.ruleForm.eduStartTime,this.ruleForm.eduEndTime].join(',')
          this.ruleForm.trainingTime = obj
          callback();

        }
      };


// 在rules下面使用
trainingTime: [{
          required: true, validator:validator, trigger: 'change'
        }]