使用正则表达式进行输入格式验证时出现随机失效异常

问题场景 #

使用原生JS+HTML开发，给文本输入框绑定keyup事件做特殊字符验证：

• 通过正则表达式检测输入内容，若包含特殊字符则标记输入无效
• 正则表达式：/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/g

出现的异常：

• 输入多个特殊字符后删除时，正则会误判为无特殊字符
• 按下Control/Alt这类无输入的按键时，会切换输入的有效/无效状态

核心原因 #

1. 正则全局标志g的状态残留
   当正则使用g全局标志时，RegExp.test()方法会记住上一次匹配的lastIndex位置。下次调用时会从该位置开始匹配，而非字符串开头。比如第一次匹配到特殊字符后，lastIndex指向匹配位置之后，第二次调用时若从该位置找不到匹配，就会返回false——即使字符串里仍有特殊字符，导致结果交替翻转。

2. keyup事件的触发逻辑
   按下Control/Alt这类按键时，输入框的值并未变化，但keyup事件依然会触发。此时调用test()会基于上次残留的lastIndex返回相反结果，导致状态错误切换。

解决方案 #

修正步骤 #

1. 移除正则的g标志：我们只需要检测字符串中是否存在至少一个特殊字符，不需要全局匹配所有实例，去掉g后test()每次都会从字符串开头重新匹配。
2. 改用input事件代替keyup：input事件仅在输入内容实际变化时触发，避免无输入按键导致的无效验证。
3. 优化DOM查询：直接使用event.target获取输入元素，减少重复DOM查询。

修正后的代码 #

JavaScript

// 移除全局标志g
const noSymbolsRegex = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
const onChange = (event) => {
  const value = event.target.value;
  const hasError = noSymbolsRegex.test(value);
  console.log(
    `Value => ${value} \n Has forbidden symbols ? ${hasError ? "YES" : "NO"}`
  );
  // 直接用当前触发事件的输入元素，无需重复查询DOM
  event.target.dataset.valid = hasError ? "false" : "true";
};
const input = document.querySelector("#my-test-input");
input?.addEventListener("input", onChange);

HTML

<label for="test">Test input</label>
<input name="test" type="text" id="my-test-input" data-valid="true">

CSS

input[data-valid="false"] {
  background-color: red;
}

input[data-valid="true"] {
  background-color: green;
}

内容的提问来源于stack exchange，提问作者Buenaventura Pino Moslero