如何使用Vuelidate验证日期对象并设置当前日期为最小日期？

你的核心问题在于用字符串传递给minValue验证器，而minValue是基于数值/字典序比较的，这和日期的逻辑比较完全不同，导致验证结果不符合预期。比如字符串"01.01.2025"会被认为比"31.12.2024"小，但实际日期却是更大的，这就会出现错误的验证反馈。另外还要注意：你的需求是“日期不能晚于当前”，对应应该用maxValue而非minValue——minValue是限制日期不能早于某个值，maxValue才是限制不能晚于某个值。

下面给你两种可靠的解决方案，都结合Moment.js来处理日期逻辑：

方案一：自定义日期验证器（推荐，逻辑更清晰） #

直接写一个专门的日期验证器，用Moment.js的日期比较方法来判断输入日期是否晚于当前日期：

Vue.use(window.vuelidate.default)
const { required } = window.validators

// 自定义最大日期验证器：限制输入日期不能晚于指定日期（这里是当前日期）
const maxDate = (maxDateMoment) => (value) => {
  if (!value) return true; // 空值交给required验证
  const inputDate = moment(value, 'DD.MM.YYYY', true); // 第三个参数true开启严格格式验证
  return inputDate.isValid() && inputDate.isSameOrBefore(maxDateMoment);
}

new Vue({
  el: "#app",
  data: {
    dateInput: '' // 存储用户输入的日期字符串（格式DD.MM.YYYY）
  },
  validations: {
    dateInput: {
      required,
      maxDate: maxDate(moment()) // 传入当前日期的Moment对象
    }
  }
})

对应的模板可以这样写来展示错误信息：

<div id="app">
  <input 
    v-model="$v.dateInput.$model" 
    type="text" 
    placeholder="请输入日期（DD.MM.YYYY）"
  >
  <div class="error" v-if="$v.dateInput.$error">
    <span v-if="!$v.dateInput.required">日期不能为空</span>
    <span v-else-if="!$v.dateInput.maxDate">日期不能晚于当前日期</span>
    <span v-else-if="!moment(dateInput, 'DD.MM.YYYY', true).isValid()">日期格式不正确，请输入DD.MM.YYYY格式</span>
  </div>
</div>

方案二：利用Vuelidate的transform转换值后使用maxValue #

如果你想继续用官方内置验证器，可以通过transform把输入的日期字符串转换成时间戳（数值类型），让maxValue能正确比较：

Vue.use(window.vuelidate.default)
const { required, maxValue } = window.validators

new Vue({
  el: "#app",
  data: {
    dateInput: ''
  },
  validations: {
    dateInput: {
      required,
      // 先验证日期格式是否合法
      validFormat(value) {
        return moment(value, 'DD.MM.YYYY', true).isValid();
      },
      // 转换为时间戳后，验证是否不晚于当前日期
      maxDate: {
        value: maxValue(moment().valueOf()), // 当前日期的时间戳作为上限
        transform(value) {
          const inputDate = moment(value, 'DD.MM.YYYY', true);
          return inputDate.isValid() ? inputDate.valueOf() : null;
        }
      }
    }
  }
})

关键注意事项 #

• 永远不要直接用字符串比较日期：字符串的字典序和日期的时间顺序完全不同，会导致验证逻辑混乱。
• 严格验证日期格式：用Moment.js的第三个参数true开启严格模式，避免用户输入类似32.13.2024这种无效日期。
• 区分minValue和maxValue：你的需求是“不能晚于当前日期”，对应maxValue；如果是“不能早于当前日期”才用minValue。

内容的提问来源于stack exchange，提问作者Cheslav