URL正则验证在输入第6个字符时失效问题求助

问题根源分析 #

1. 核心逻辑颠倒：原代码的验证逻辑完全搞反——当输入符合正则表达式的标准URL格式时，会直接返回'Invalid url'，这违背了基本验证逻辑；仅当输入不符合正则时，才会检查预设URL列表的前缀匹配，导致完整的有效URL也会被误判为无效。
2. 验证顺序错误：正则用于校验完整URL格式，但用户在输入过程中（比如输入到www.go）还未完成完整URL，自然无法匹配正则，此时应该优先通过预设列表的前缀匹配判定有效，但原代码将正则验证放在了前缀匹配之前，导致输入过程中的有效前缀被误判。
3. 遍历潜在风险：使用for...in遍历对象时未排除原型链属性（当前场景虽无影响，但存在隐患）。

修正方案 #

调整验证顺序，优先检查预设列表的前缀匹配，再校验完整URL格式，同时修正逻辑颠倒问题：

const validUrl = (value: string | null): string => {
    // 空输入按原逻辑判定为有效
    if (value === null || value === '') {
        return '';
    }

    if (typeof value !== 'string') {
        return 'Invalid url';
    }

    // 优先检查预设URL列表的前缀匹配，支持输入过程中的部分内容
    for (const item of Object.keys(urlStrings)) {
        if (item.startsWith(value) || value.startsWith(item)) {
            return ''; // 判定为有效
        }
    }

    // 校验完整的标准URL格式
    const regex = /^(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]{1})|([a-zA-Z]{1}[0-9]{1})|([0-9]{1}[a-zA-Z]{1})|([a-zA-Z0-9][a-zA-Z0-9-_]{1,61}[a-zA-Z0-9]))\.([a-zA-Z]{2,6}|[a-zA-Z0-9-]{2,30}\.[a-zA-Z]{2,3})+(\.[a-zA-Z]{2,3})?((\/)?[a-z0-9-]{1,61}(\/)?){0,30}$/;
    if (regex.test(value)) {
        return ''; // 判定为有效
    }

    // 既不匹配预设列表也不符合URL格式，判定无效
    return 'Invalid url';
};

修正逻辑说明 #

1. 空输入保持原逻辑，返回有效（空字符串）。
2. 优先遍历预设URL列表：只要输入是预设URL的前缀（如www.go匹配www.google.com），或输入是完整的预设URL，都直接判定为有效。
3. 正则验证后置：仅当输入不在预设列表范围内时，才用正则校验是否符合标准URL格式，符合则判定有效。
4. 最终兜底：既不匹配预设列表也不符合格式的输入，返回无效提示。

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