客户端Input元素正则pattern验证失效问题求助

1. HTML pattern 属性的核心误区 #

你对pattern属性的作用理解错了：

• 它不会实时阻止不符合规则的输入，仅在表单提交或主动调用input.checkValidity()时触发验证逻辑。
• 你设置的pattern字符串存在冗余转义：JS字符串里\\d会被解析为\d（这部分没问题），但HTML的pattern默认会给正则自动加上^和$（强制匹配整个输入），手动重复添加反而可能导致匹配异常。

2. 实时输入验证的逻辑错误 #

你在keypress事件里的校验逻辑完全偏离需求：

• 用正则匹配单个event.key字符毫无意义，你的规则是验证整个输入值的格式（比如最多9位整数+3位小数），但当前代码只检查按键的单个字符，根本无法校验整体格式。
• 正则本身也写错了：/(\d{1,3}\.\d{1,3})|(\.\d{1,3})|(\d{1,3})/既没有强制匹配整个字符串，还把整数位数限制成了3位，和你初始注释里的9位需求不符。

修复方案 #

步骤1：修正pattern属性设置 #

如果需要保留表单验证功能，简化pattern的写法，避免转义错误：

// 方式1：直接写正确的字符串（去掉多余的^和$）
this.eInput.setAttribute("pattern", "(\\d{1,9}\\.\\d{1,3})|(\\.\\d{1,3})|(\\d{1,9})");

// 方式2：用正则对象的source属性自动生成字符串，彻底避免转义问题
const regexPattern = /^(\d{1,9}\.\d{1,3})|(\.\d{1,3})|(\d{1,9})$/.source;
this.eInput.setAttribute("pattern", regexPattern);

步骤2：重构实时输入验证逻辑 #

替换keypress事件里的代码，改为校验输入后的完整值：

this.eInput.addEventListener('keypress', (event) => {
    // 放行导航键（比如方向键、退格键）
    if (this.isKeyPressedNavigation(event)) {
        event.stopPropagation();
        return;
    }

    // 先过滤非数字和非小数点的按键
    const allowedChars = /[\d.]/;
    if (!allowedChars.test(event.key)) {
        event.preventDefault();
        return;
    }

    // 模拟输入后的完整值（考虑光标位置）
    const currentValue = event.target.value;
    const cursorPos = event.target.selectionStart;
    const newValue = currentValue.slice(0, cursorPos) + event.key + currentValue.slice(cursorPos);

    // 用正确的正则校验完整值：允许空值、小数点开头、整数最多9位、小数最多3位
    const fullRegex = /^(\d{1,9}\.\d{0,3})|(\.\d{0,3})|(\d{1,9})$|^$/;
    if (!fullRegex.test(newValue)) {
        console.log('不符合格式要求');
        event.preventDefault();
    } else {
        console.log('输入有效');
    }
});

步骤3：修正初始值校验 #

确保初始赋值也符合规则：

const initialValue = params.charPress || params.value || '';
const fullRegex = /^(\d{1,9}\.\d{1,3})|(\.\d{1,3})|(\d{1,9})$|^$/;
this.eInput.value = fullRegex.test(initialValue) ? initialValue : '';

额外提醒 #

• 永远不要依赖pattern做实时输入拦截，它只是表单提交时的验证工具。
• 上面的正则已经处理了重复小数点的问题（完整值里只能有一个小数点），不需要额外判断。

内容的提问来源于stack exchange，提问作者Özge Elgürmüz