车牌输入正则问题排查：React输入框无法正常输入内容

错误原因分析 #

1. 正则逻辑不符合输入流程 #

当前正则要求输入内容必须完全匹配最终的完整车牌格式（比如A111AA 777），但用户输入是逐步进行的（比如先输入第一个字母A），此时输入内容无法满足正则的完整要求，导致regex.test(value)返回false，进而无法更新carNumber状态，输入框始终无内容。

2. 正则规则与需求不匹配 #

原正则存在两处不符合需求的问题：

• 第二部分字母仅允许输入1个（[АВЕКМНОРСТУХABEKMHOPCTYX]?），但需求要求是2个字母
• 空格后的数字要求必须输入2-3个（\d{2,3}），不允许输入过程中的0个或1个数字的中间状态

修复方案 #

调整正则为逐步匹配规则 #

修改正则，允许输入过程中的中间状态，同时严格对应车牌格式分段：

const regex = /^[АВЕКМНОРСТУХABEKMHOPCTYX]{0,1}\d{0,3}[АВЕКМНОРСТУХABEKMHOPCTYX]{0,2}(?:\s?\d{0,3})?$/ui;

正则说明：

• ^[АВЕКМНОРСТУХABEKMHOPCTYX]{0,1}：开头允许0或1个指定字母（对应需求的开头1个字母）
• \d{0,3}：允许0到3个数字（对应连续3个数字的输入过程）
• [АВЕКМНОРСТУХABEKMHOPCTYX]{0,2}：允许0到2个指定字母（对应需求的2个字母）
• (?:\s?\d{0,3})?$：允许可选的空格，加上0到3个数字（对应空格后2或3个数字的输入过程）

优化输入处理逻辑（可选） #

加入自动插入空格的逻辑，当用户输入完前6位（字母+3数字+2字母）时自动添加空格，提升输入体验：

const [carNumber, setCarNumber] = useState('') 
<input
    type="text"
    name="name"
    placeholder="A001AA 01"
    required
    value={carNumber}
    onChange={event => {
        let value = event.target.value.toUpperCase();
        // 过滤非允许的字符
        value = value.replace(/[^АВЕКМНОРСТУХABEKMHOPCTYX\d\s]/g, '');
        // 输入到第6位且无空格时自动添加空格
        if (value.length === 6 && !value.includes(' ')) {
            value += ' ';
        }
        // 限制总长度（最长为10位：A111AA 777）
        if (value.length > 10) {
            value = value.slice(0, 10);
        }
        const regex = /^[АВЕКМНОРСТУХABEKMHOPCTYX]{0,1}\d{0,3}[АВЕКМНОРСТУХABEKMHOPCTYX]{0,2}(?:\s?\d{0,3})?$/ui;
        if (regex.test(value) || value === '') {
            setCarNumber(value);
        }
    }}
/>

验证说明 #

修改后，输入过程中的每一步（比如输入单个字母、1个数字、第2个字母等）都会被正则匹配通过，setCarNumber正常更新状态，输入框可以正常输入内容，最终完成输入后也会符合需求的车牌格式。

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