Vue.js日期选择器验证默认显示错误信息问题求助

你遇到的问题核心在于当前的错误信息触发逻辑太直接——只要字段为空就立刻展示，所以页面一加载错误提示就会出现。要实现「用户离开该字段后才显示错误」的需求，我们需要跟踪这个datepicker是否已经失去过焦点，再结合字段为空的状态来控制错误信息的显示。

下面是具体的修改方案：

步骤1：添加焦点跟踪状态 #

在组件的data中新增一个变量，用来记录该日期选择器是否被用户点击过并失去焦点：

data() {
  return {
    present_complaint: {
      experienceSince: '',
      // 你的其他字段...
    },
    // 新增：标记日期字段是否失去过焦点
    hasBlurredDateField: false
  }
}

步骤2：给Datepicker绑定失焦事件 #

给datepicker组件添加@blur事件，当用户点击其他区域离开该组件时，将刚才新增的状态设为true：

<datepicker 
  v-model="present_complaint.experienceSince" 
  name="date" 
  placeholder="24-july-1994"
  @blur="hasBlurredDateField = true"
></datepicker> 

步骤3：修改错误信息的显示条件 #

更新错误提示的v-show逻辑，只有当字段为空且已经失去过焦点时，才显示错误信息：

<span 
  class="error-msg" 
  v-show="present_complaint.experienceSince === '' && hasBlurredDateField"
> 
  Date is a mandatory field 
</span>

额外优化：表单提交时强制验证 #

如果用户直接提交表单而完全没碰过这个日期字段，我们也应该强制显示错误。可以在提交方法里主动把焦点状态设为true：

methods: {
  submitForm() {
    // 先标记所有需要验证的字段为已触发过焦点校验
    this.hasBlurredDateField = true;
    
    // 再执行表单验证逻辑
    if (this.present_complaint.experienceSince === '') {
      alert('请填写必填日期');
      return;
    }
    
    // 验证通过后执行提交操作
    // ...
  }
}

这样修改后，错误信息只会在用户操作过该字段并离开，或是直接提交表单时才会显示，完全符合你的需求。

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