作为初入职场的小白,前段时间碰到了使用elementUI表单校验的一些问题记一下

项目中有两个el-time-picker,除了在提交的时候需要做校验来提示用户选择开始时间和结束时间之外。
还有一个要求就是选择的开始时间不能晚于结束时间,否则提示,
选择的结束时间不能早于开始时间,否则提示,
最终使用的是提供的'validator'进行处理实现的
代码如下:


            
              
                  
                  
                
              
              
                
                  
                  
                
              
              
          

然后是定义的校验规则方法(methods):
//首先是点击开始验证结束,结束验证开始
verifyTime(val){ 
      if(val == 'start'){
        this.$refs.ruleForm.validateField('endTime')
      }
      if(val == 'end'){
        this.$refs.ruleForm.validateField('startTime')
      }
    },

//提交的时候验证开始时间和结束时间
validateTime(rule, value, callback){  
      if(rule.field == "startTime"){
        if (value === '') {
          callback(new Error('请选择开始时间'));
        } else if (this.ruleForm.endTime && moment('2022-01-01 ' + value).valueOf() > moment('2022-01-01 ' + this.ruleForm.endTime).valueOf()) {
          callback(new Error(this.startTips));
        } else {
          callback();
        }
      }
      if(rule.field == "endTime"){
        if (value === '') {
          callback(new Error('请选择结束时间'));
        } else if (this.ruleForm.startTime && moment('2022-01-01 ' + value).valueOf() < moment('2022-01-01 ' + this.ruleForm.startTime).valueOf()) {
          callback(new Error(this.endTips));
        } else {
          callback();
        }
      }
    },

你可能感兴趣的:(前端element-ui)