如何创建依赖其他模型的Vuetify通用日期验证规则？

针对跨路由填充数据时UI限制失效的问题，我们可以封装可复用的依赖型验证规则，确保开始/结束日期的一致性校验覆盖所有场景：

1. 封装通用规则生成函数 #

把验证逻辑抽成可接收依赖模型的函数，返回符合Vuetify规范的规则数组，支持区分开始/结束日期校验：

// 通用日期范围验证规则生成器
export const dateRangeRules = (dependentModel, isStartDate = true) => {
  return [
    v => !!v || '日期不能为空', // 保留必填校验
    v => {
      // 依赖字段未填充时跳过校验，避免初始状态报错
      if (!dependentModel.value) return true
      const current = new Date(v)
      const dependent = new Date(dependentModel.value)
      
      return isStartDate 
        ? current <= dependent || '开始日期不能晚于结束日期'
        : current >= dependent || '结束日期不能早于开始日期'
    }
  ]
}

2. 组件中引入并使用规则 #

通过计算属性动态生成规则，确保依赖字段变化时规则自动更新：

<template>
  <v-form ref="dateFormRef">
    <v-date-picker
      v-model="startDate"
      :rules="startDateRules"
      :max="endDate"
      label="开始日期"
    ></v-date-picker>
    
    <v-date-picker
      v-model="endDate"
      :rules="endDateRules"
      :min="startDate"
      label="结束日期"
    ></v-date-picker>
  </v-form>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted } from 'vue'
import { dateRangeRules } from '@/utils/validation'

const startDate = ref('')
const endDate = ref('')
const dateFormRef = ref(null)

// 动态生成对应字段的验证规则
const startDateRules = computed(() => dateRangeRules(endDate, true))
const endDateRules = computed(() => dateRangeRules(startDate, false))
</script>

3. 路由填充数据后触发验证 #

当从其他路由自动填充数据时，手动触发表单校验，确保数据一致性：

// 模拟路由数据填充逻辑
const loadRouteData = () => {
  // 从路由参数或接口获取数据
  startDate.value = '2024-06-15'
  endDate.value = '2024-06-10'
  
  // 等待数据更新完成后触发验证
  nextTick(() => {
    dateFormRef.value?.validate()
  })
}

onMounted(() => {
  loadRouteData()
})

4. 优化：实时联动校验 #

监听日期字段变化，自动触发对应字段的校验，提升交互体验：

// 修改结束日期时，自动校验开始日期
watch(endDate, () => {
  if (startDate.value) {
    dateFormRef.value?.validate('startDate')
  }
})

// 修改开始日期时，自动校验结束日期
watch(startDate, () => {
  if (endDate.value) {
    dateFormRef.value?.validate('endDate')
  }
})

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