如何在VineJS验证器中处理带时区的DateTime值？

vine.date()默认仅支持无时区的日期格式，对带时区的ISO 8601格式（如2024-05-20T12:30:00+00:00或2024-05-20T12:30:00Z）会返回验证错误，以下是两种可行的解决方式：

方式一：自定义带时区的日期验证规则 #

借助第三方日期库（如luxon）精准解析带时区的日期，规避原生Date构造函数的兼容性问题。

1. 安装依赖：

npm install luxon

2. 创建并使用自定义规则：

import vine from '@vinejs/vine'
import { DateTime } from 'luxon'

// 自定义带时区日期验证规则
const dateWithTimezone = vine.createRule((value, options, ctx) => {
  if (typeof value !== 'string') {
    ctx.report('值必须为字符串类型', 'date', ctx.field)
    return
  }

  // 解析带时区的日期字符串
  const parsedDate = DateTime.fromISO(value, { setZone: true })
  if (!parsedDate.isValid) {
    ctx.report('不是有效的带时区日期', 'date', ctx.field)
    return
  }

  // 将解析后的JS Date对象存入上下文，供后续使用
  ctx.mutate(parsedDate.toJSDate(), ctx.field)
})

// 在Schema中使用自定义规则
const eventSchema = vine.object({
  eventDateTime: vine.string().use(dateWithTimezone)
})

方式二：扩展默认的date规则 #

修改vine.date()的默认逻辑，使其支持带时区的日期解析：

import vine from '@vinejs/vine'

// 扩展默认的date验证规则
vine.extendRule('date', (value, options, ctx) => {
  if (typeof value !== 'string') {
    ctx.report('值必须为字符串类型', 'date', ctx.field)
    return
  }

  const parsedDate = new Date(value)
  if (isNaN(parsedDate.getTime())) {
    ctx.report('不是有效的日期', 'date', ctx.field)
    return
  }

  // 可选：添加强制要求时区的校验逻辑
  if (options.requireTimezone && !value.includes('+') && !value.includes('Z')) {
    ctx.report('日期必须包含时区信息', 'date', ctx.field)
    return
  }

  ctx.mutate(parsedDate, ctx.field)
})

// 使用扩展后的规则，可传入自定义参数
const eventSchema = vine.object({
  eventDateTime: vine.date({ requireTimezone: true })
})

注意：方式二依赖原生Date构造函数解析时区，部分老旧浏览器可能存在兼容性问题，推荐优先使用方式一。

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