前端时间校验：起始时间和结束时间校验

在前端开发中，经常需要对用户输入的时间进行校验，确保其格式正确且符合业务逻辑。本文将介绍如何实现起始时间和结束时间校验，以及如何处理时间格式无效的情况。

起始时间校验

checkStartTime(rule, value, callback) {
  if (!this.form.incomePeriodDateStart) {
    callback(new Error('请输入起始时间'));
  } else {
    const startDate = new Date(this.form.incomePeriodDateStart);
    if (isNaN(startDate.getTime())) {
      callback(new Error('起始时间格式无效'));
    } else {
      this.form.incomePeriodDateEnd = '';
      callback();
    }
  }
},

结束时间校验

checkEndTime(rule, value, callback) {
  if (!this.form.incomePeriodDateStart && !this.form.incomePeriodDateEnd) {
    callback(new Error('请输入结束时间'));
  } else {
    const startDate = new Date(this.form.incomePeriodDateStart);
    const endDate = new Date(this.form.incomePeriodDateEnd);
    if (isNaN(endDate.getTime())) {
      callback(new Error('结束时间格式无效'));
    } else if (endDate < startDate) {
      this.form.incomePeriodDateEnd = '';
      callback(new Error('结束时间不能小于起始时间'));
    } else {
      callback();
    }
  }
},

提交表单

submitForm() {
  console.log(this.form.incomePeriodDateEnd, 'person');
  this.$refs['form'].validate((valid) => {
    if (valid) {
      this.$refs.form.validateField();
      this.form.acTaxPiPersonCalculationSchedule.acTaxableIncome = this.acTaxableincome;
      this.form.acTaxPiPersonCalculationSchedule.acTaxableAmount = this.acTaxableamount;
      this.form.acTaxPiPersonCalculationSchedule.acDeductiblePaymentAmount = this.acDeductibleAmount;
      this.form.acTaxPiPersonCalculationSchedule.payableTaxAmount = this.payableTaxamount;
      // this.form.reportingPeriodDate = this.reportingPeriodDate + '-01';
      const existperson = this.personInfo.find(item => item.personId === this.form.acTaxPiPersonVo.personId);
      // if (existperson) {
      //   this.$message.error('person 已存在');
      //   return;
      // }
      if (this.form.personId != null) {
        this.form.companyId = this.companyId;
        updateReportingLicensingIncome(this.form).then(response => {
          console.log(this.form.incomePeriodDateEnd, 'edit');
          this.msgSuccess('修改成功');
          this.open = false;
          this.getList();
        });
      } else {
        this.form.acTaxPiPersonCalculationSchedule.taxRate = this.defaultTax;
        this.form.personId = this.form.acTaxPiPersonVo.personId;
        // this.form.reportingPeriodDate = this.collection;
        this.form.companyId = this.companyId;
        console.log(this.form.personId, 'acTaxPiPersonVo');
        addReportingLicensingIncome(this.form).then(response => {
          console.log(response, 'resssssssssss');
          this.msgSuccess('新增成功');
          this.open = false;
          this.getList();
        });
      }
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},

处理时间格式无效的情况

如果校验过程中发现时间格式无效，可以通过以下几种方法进行处理：

提示用户重新输入: 弹出提示框告知用户输入的时间格式错误，并引导用户重新输入。
默认时间: 将时间字段设置为默认值，例如将结束时间设置为当前时间。
阻止提交: 阻止提交表单，防止用户提交错误信息。

其他注意事项

确保incomePeriodDateStart和incomePeriodDateEnd字段能够正确获取用户输入的时间值。
可以根据实际业务需求，对时间校验进行调整，例如设置时间范围限制。

本文提供了一种前端时间校验的实现方法，可以作为参考。实际应用中需要根据具体情况进行调整。