两个HH:mm格式时间输入验证：可用现有规则还是需自定义？

核心结论：如果你的验证工具支持跨字段依赖校验，可以组合现有规则+轻量自定义逻辑；如果没有这类工具支持，或者想更简洁直接，直接写自定义规则更高效。

情况1：用支持跨字段校验的验证库（如Yup、VeeValidate等） #

这类库本身有现成的格式校验规则（比如HH:mm格式匹配），你只需要在此基础上添加跨字段的时间比较逻辑即可：

1. 先用现有规则校验两个时间的HH:mm格式合法性；
2. 给结束时间添加一个自定义测试规则，引用开始时间的值，转成分钟数（或时间戳）做数值比较。

举个Yup的实现例子：

import * as Yup from 'yup';

const timeSchema = Yup.object().shape({
  startTime: Yup.string()
    .matches(/^([01]\d|2[0-3]):([0-5]\d)$/, '格式必须为HH:mm')
    .required('开始时间不能为空'),
  endTime: Yup.string()
    .matches(/^([01]\d|2[0-3]):([0-5]\d)$/, '格式必须为HH:mm')
    .required('结束时间不能为空')
    .test(
      'end-later-than-start',
      '结束时间必须晚于开始时间',
      function(value) {
        const { startTime } = this.parent;
        if (!startTime || !value) return true; // 空值由必填规则处理
        // 转成分钟数比较
        const [startH, startM] = startTime.split(':').map(Number);
        const [endH, endM] = value.split(':').map(Number);
        return (endH * 60 + endM) > (startH * 60 + startM);
      }
    )
});

情况2：原生表单或无跨字段支持的验证工具 #

这种情况下直接写自定义规则更省事，一步搞定格式校验和时间顺序判断：

function checkTimeRange(startTime, endTime) {
  const timePattern = /^([01]\d|2[0-3]):([0-5]\d)$/;
  // 先校验格式
  if (!timePattern.test(startTime)) return '开始时间格式错误，请输入HH:mm';
  if (!timePattern.test(endTime)) return '结束时间格式错误，请输入HH:mm';
  // 转成总分钟数比较
  const startTotal = startTime.split(':').reduce((h, m) => h * 60 + Number(m), 0);
  const endTotal = endTime.split(':').reduce((h, m) => h * 60 + Number(m), 0);
  if (endTotal <= startTotal) return '结束时间必须晚于开始时间';
  return null; // 验证通过
}

总结 #

• 有验证库支持跨字段：优先组合现有格式规则+跨字段测试，复用性更强；
• 无工具支持：直接写自定义规则，逻辑更集中，减少冗余。

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