Question

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

Answer 1

我使用两种方法：

首先是将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>

Answer 2

使用setter和getter使用watch或computed值。

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

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

例如，如果您想要正好有5个数字（#####），那么正则表达式应该是\d{1,5}而不是\d{5}，因为您需要能够输入前四个在此之前，尽管你仍然会使用后面的那个来验证字段是否已完成/完成/有效。

另一个例子，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 JS - 如何限制输入字段中的特殊字符？

2 个答案: