10

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

4

2 回答 2

16

我使用两管齐下的方法：

首先是使用watchorcomputed值和 setter，正如Daniel上面推荐的那样。除了处理键盘输入外，它还通过拖放、粘贴或用户想出的任何其他方式处理输入。

第二个是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>

于 2020-04-16T19:14:03.557 回答
7

在 setter 和 getter 中使用 awatch或value。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（其中做）

于 2018-05-28T14:20:53.000 回答