Vue JS - 如何限制输入字段中的特殊字符？

Posted 2023-02-22

【中文标题】Vue JS - 如何限制输入字段中的特殊字符？

【英文标题】：Vue JS - How to restrict special characters in an input field?

【发布时间】：2018-11-07 01:13:21

【问题描述】：

在 Vue JS 中实现文本字符限制的最佳方法是什么？我希望使用 RegExp 来实现，这样用户就不会被允许在字段中键入符号。

【问题讨论】：

屏蔽输入github.com/vuejs/awesome-vue/blob/master/README.md#masked-input

【参考方案1】：

使用带有 setter 和 getter 的 watch 或 computed 值。

watch: 
  myAlphaNumField(newVal) 
    let re = /[^A-Z0-9]/gi;
    this.$set(this, 'myAlphaNumField', newVal.replace(re, ''));
  

如果您希望正则表达式与模式完全匹配，诀窍在于定义正则表达式，使其允许所有字符直到最后一个。

例如，如果您想要正好有 5 位数字 (#####)，则正则表达式应该是 \d1,5 而不是 \d5，因为您需要能够在此之前键入前四位，尽管您会仍然使用后一个来验证该字段是否已完成/完成/有效。

另一个例子，A#A#A# 将是 [A-Z]([0-9]([A-Z]([0-9]([A-Z]([0-9])?)?)?)?)? 关键是，第一个字符之后的每个字符都是可选的，但前提是前面的字符可用

###-AA 的另一个示例：\d(\d(\d(\-(\w(\w)?)?)?)?)?

您还可以使用现有的库，例如 https://github.com/insin/inputmask-core（不包含 vue 扩展）或 https://github.com/niksmr/vue-masked-input（包含）

【讨论】：

是的。这种使用手表的方法对我有用。但是，我还使用了来自 vue-pattern-input 组件的几个附加事件。引用自npmjs.com/package/vue-pattern-input

无效：“[Vue 警告]：避免在运行时向 Vue 实例或其根 $data 添加反应性属性 - 在 data 选项中预先声明。”

【参考方案2】：

我使用两管齐下的方法：

首先是使用带有 setter 的 watch 或 computed 值，如上面的 Daniel recommends。除了处理键盘输入外，它还处理通过拖放、粘贴或用户想出的任何其他方式进行的输入。

第二个是keydown 处理程序。仅使用观察值时，UI 会出现轻微延迟。受限字符在被删除之前会短暂显示。为了获得更无缝的用户体验，keydown 侦听器取消了无效输入的键盘事件。

new Vue(
  el: "#app",
  data: 
    name: "",
  ,
  watch: 
    name(val) 
      this.name = val.replace(/\W/g, "");
    ,
  ,
  methods: 
    nameKeydown(e) 
      if (/^\W$/.test(e.key)) 
        e.preventDefault();
      
    ,
  ,
);

html 
  font-family: sans-serif;


.demo 
  display: flex;
  justify-content: space-between;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main id="app">
  <p>Try typing spaces, punctuation, or special characters into each box to see the difference made by the key handler.</p>
  <div class="demo">
    <div>
      <div>Without key handler:</div>
      <input type="text" v-model="name" />
    </div>
    <div>
      <div>With key handler:</div>
      <input type="text" v-model="name" @keydown="nameKeydown($event)" />
    </div>
  </div>
</main>

【讨论】：

如何在您的示例中允许其他键盘事件，如“删除”、制表符和空格？我正在考虑使用 preventDefault() 的方法。谢谢！

只需更改if 块以测试您要取消的任何键。在我的示例中，Tab、Delete 和 Backspace 没有被取消，但是 Space 被取消了。要允许空格，您可以将正则表达式更改为使用 [^ \w]（除空格或“单词字符”之外的任何内容）而不是当前使用的内容：\W（任何非单词字符）。您将不得不更改这两个正则表达式的那部分。所以，this.name = val.replace(/[^ \w]/g, ""); 和 if (/^[^ \w]$/.test(e.key))