如何自定义vue3datepicker必填项未选择时的错误提示

实现步骤 #

1. 禁用原生HTML5表单验证
   给包裹日期选择器的表单添加novalidate属性，彻底关闭浏览器默认的提示弹窗。

2. 跟踪日期选择状态与错误信息
   在组件中定义响应式变量：绑定日期的selectedDate，以及控制错误显示的dateError。

3. 手动处理表单提交验证
   提交表单时，先检查selectedDate是否为空，为空则设置自定义错误信息；反之清除错误。

4. 实时清除错误（可选）
   监听日期选择器的blur或update:modelValue事件，当用户开始操作日期选择器时，自动清除错误提示。

完整代码示例 #

<template>
  <form @submit.prevent="handleSubmit" novalidate>
    <div class="date-picker-wrapper">
      <Datepicker
        v-model="selectedDate"
        required
        @blur="clearDateError"
        @update:modelValue="clearDateError"
        placeholder="选择日期"
      />
      <!-- 自定义错误提示 -->
      <p v-if="dateError" class="error-message">{{ dateError }}</p>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'
import Datepicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'

const selectedDate = ref(null)
const dateError = ref('')

const handleSubmit = () => {
  if (!selectedDate.value) {
    dateError.value = '请选择有效的日期'
    return
  }
  // 这里写表单提交逻辑
  console.log('提交日期:', selectedDate.value)
}

const clearDateError = () => {
  dateError.value = ''
}
</script>

<style scoped>
.error-message {
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
</style>

关键说明 #

• novalidate：阻止浏览器触发原生必填项提示，让我们完全自定义验证逻辑。
• required属性：保留该属性是为了符合表单语义，实际验证由我们手动完成。
• 错误信息通过v-if控制显示，样式可根据需求自定义调整。

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