Vue输入验证问题：西里尔字符无法通过正则替换立即清除

你遇到的问题核心在于watchEffect的执行时机：它是在响应式数据更新、DOM已经渲染完成后才触发的，所以输入西里尔字符时，会先显示在输入框里，之后才被替换为空，导致视觉上的延迟。而替换成空格时，因为字符长度没有变化，所以看起来像是立即生效，但本质上还是有同样的延迟逻辑。

下面是两种更直接的解决方案：

方案一：监听input事件实时处理 #

直接在输入框的input事件中处理内容，这样能在输入的瞬间就拦截并替换非法字符，不会出现延迟：

模板部分：

<input v-model="form.token" @input="cleanToken" />

脚本部分：

const incorrectToken = /[А-яёЁ]+/ig;
const form = ref({ token: '' });

const cleanToken = () => {
  form.value.token = form.value.token.replace(incorrectToken, '');
};

方案二：自定义全局指令（适合多处复用） #

如果多个输入框都需要这个规则，可以封装成自定义指令，监听输入事件实时清理：

在Vue实例初始化时注册指令：

const app = createApp(App);
app.directive('no-cyrillic', {
  mounted(el) {
    const regex = /[А-яёЁ]+/ig;
    el.addEventListener('input', () => {
      // 直接修改输入框的值并触发input事件同步v-model
      el.value = el.value.replace(regex, '');
      el.dispatchEvent(new Event('input'));
    });
  }
});
app.mount('#app');

模板中使用：

<input v-model="form.token" v-no-cyrillic />

另外，也可以优化你的正则表达式，[А-яёЁ]其实包含了一些非西里尔的符号（比如中间的一些标点），更精准的西里尔字符匹配可以用[\u0400-\u04FF]+，这样能避免误匹配：

const incorrectToken = /[\u0400-\u04FF]+/ig;

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