Vue.js – 如何允许用户在输入字段中仅输入字母？

Question

我有一个输入字段，我们称之为firstName。我想让用户只输入字母和撇号。没有数字和其他特殊符号。逻辑是这样的：

\n

\n
1. 在 @keydown 上，某些方法（我们称之为“ checkName() ”）获取输入的字符。
\n
2. 然后它检查这个符号是否属于类似[Az]的符号。如果属于，则该方法不执行任何操作。如果不是 \xe2\x80\x93 该方法将其替换为''。（还需要向此检查数组添加一个撇号，以便用户也可以键入它）。
\n

\n

我怎样才能意识到这一点？我寻找了一些 Vue 验证器和掩码，但没有找到我需要的东西。验证器只检查输入字段，掩码套件更好，但有必要有固定的字符串范围。

\n

有任何想法吗？或者也许一切都变得更容易，而我却把它变得复杂了？

\n

Answer 1

如果您希望用户只能输入字母，那么您可以执行v-on:keypress并检查事件功能。

<input type="text" v-model="firstName" v-on:keypress="isLetter($event)">

那么方法：

<input type="text" v-model="firstName" v-on:keypress="isLetter($event)">

示例如下： https: //codesandbox.io/s/festive-buck-hm4fd?file =/src/App.vue

^[A-Za-z\']+$如果您还想允许撇号，您可以将正则表达式模式更改为

我还添加了计算属性来检查输入值是否有效，以防您仍然希望允许用户输入字母以外的内容并显示错误