实时日期输入验证：适配输入全流程的正则表达式需求

DevOps 小满

2026-8-17

日期格式实时输入验证正则表达式方案

适用场景

React HTML输入框中实时拦截非法字符，仅限制输入格式符合指定阶段，不替代完整的日期有效性校验。

正则表达式

^$|^\d$|^\d{2}$|^\d{2}\.$|^\d{2}\.\d$|^\d{2}\.\d{2}$|^\d{2}\.\d{2}\.$|^\d{2}\.\d{2}\.\d$|^\d{2}\.\d{2}\.\d{2}$|^\d{2}\.\d{2}\.\d{3}$|^\d{2}\.\d{2}\.\d{4}$

正则逻辑说明

每个分支对应一个合法输入阶段：

^$：匹配空输入
^\d$：匹配单个数字（如"3"）
^\d{2}$：匹配两位数字（如"31"）
^\d{2}\.$：匹配两位数字加小数点（如"31."）
^\d{2}\.\d$：匹配两位数字+小数点+一位数字（如"31.1"）
^\d{2}\.\d{2}$：匹配两位数字+小数点+两位数字（如"31.10"）
^\d{2}\.\d{2}\.$：匹配"XX.XX."格式（如"31.10."）
^\d{2}\.\d{2}\.\d$：匹配"XX.XX.X"格式（如"31.10.1"）
^\d{2}\.\d{2}\.\d{2}$：匹配"XX.XX.XX"格式（如"31.10.19"）
^\d{2}\.\d{2}\.\d{3}$：匹配"XX.XX.XXX"格式（如"31.10.199"）
^\d{2}\.\d{2}\.\d{4}$：匹配"XX.XX.XXXX"格式（如"31.10.1998"）

React中使用示例

import { useState } from 'react';

function DateInput() {
  const [dateValue, setDateValue] = useState('');

  const handleChange = (e) => {
    const inputValue = e.target.value;
    const validPattern = /^$|^\d$|^\d{2}$|^\d{2}\.$|^\d{2}\.\d$|^\d{2}\.\d{2}$|^\d{2}\.\d{2}\.$|^\d{2}\.\d{2}\.\d$|^\d{2}\.\d{2}\.\d{2}$|^\d{2}\.\d{2}\.\d{3}$|^\d{2}\.\d{2}\.\d{4}$/;
    
    // 仅当输入符合规则时更新状态
    if (validPattern.test(inputValue)) {
      setDateValue(inputValue);
    }
  };

  return (
    <input
      type="text"
      value={dateValue}
      onChange={handleChange}
      placeholder="DD.MM.YYYY"
    />
  );
}

export default DateInput;