本文深入探讨了在 Vue.js 应用中实现实时输入校验的有效方法，特别是如何即时阻止用户输入特定字符。通过分析 watchEffect 方法的局限性，文章重点介绍了利用 beforeinput 事件的强大功能，配合正则表达式和 e.preventDefault() 来实现字符的立即拦截，从而提供更流畅、更准确的用户输入体验。
实时输入校验的挑战
在前端开发中，对用户输入进行实时校验是提升用户体验和数据准确性的关键。常见的需求包括限制输入字符类型（如禁止中文、特殊符号等）。一个常见的尝试是使用 Vue 的 watchEffect 或 watch 监听数据变化，并在检测到不符合要求的字符时使用 String.prototype.replace() 方法将其移除。
例如，以下代码片段尝试通过 watchEffect 移除输入中的西里尔字母：
import { ref, watchEffect } from 'vue';const form = ref({ token: '' });const incorrectToken = ref(/[А-яёЁ]+/ig);watchEffect(() => { form.value.token = form.value.token !== undefined ? form.value.token.replace(incorrectToken.value, '') : '';});
然而，这种方法存在一个明显的局限性：watchEffect 触发时，不合规的字符已经短暂地显示在输入框中，然后才被替换掉。这会导致一种“闪烁”或“延迟”的视觉效果，影响用户体验，因为用户会看到他们输入的字符被瞬间删除。对于需要即时阻止字符出现的需求，这种“事后弥补”的策略并不理想。
beforeinput 事件：即时阻止字符输入的利器
为了实现真正的“即时阻止”，我们需要在字符被插入到输入框 之前 进行拦截。HTML5 引入的 beforeinput 事件正是为此而生。
立即学习“前端免费学习笔记（深入）”；
beforeinput 事件在浏览器将用户输入的数据插入到可编辑元素（如 、