Question

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

在@keydown上，某些方法（我们称其为“ checkName（）”）会得到键入的字符。
然后，它会检查该符号是否属于诸如 [A-z] 之类的符号。如果属于，则该方法不执行任何操作。如果不是，则用''替换该方法。（还需要在此检查数组中添加撇号，以使用户也可以键入它）。

我怎么能意识到这一点？我一直在寻找一些Vue验证器和蒙版，但没有找到我需要的任何东西。验证程序只检查输入字段，更好地掩盖套件，但是必须具有固定范围的字符串。

有什么想法吗？或者，也许这一切都变得容易得多，而我却使其变得复杂了？

Answer 1

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

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

然后是方法：

isLetter(e) {
  let char = String.fromCharCode(e.keyCode); // Get the character
  if(/^[A-Za-z]+$/.test(char)) return true; // Match with regex 
  else e.preventDefault(); // If not match, don't add to input text
}

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

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

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

Answer 2

当 HTML 为您做这件事时怎么样？

<input type="text" pattern="[a-zA-Z]+">

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

2 个答案: