regex Vue中的实时正则表达式模式替换

b09cbbtk  于 2023-05-30  发布在  其他
关注(0)|答案(2)|浏览(169)

我是Vue的新手,需要验证输入。所以,在这个领域不应该是西里尔符号,这就是为什么我使用.replace方法在watchEffect钩子.不幸的是,当我键入西里尔符号时,它们出现在输入字段中,但我希望它们立即删除。也许你知道怎么做?

const incorrectToken = ref(/[А-яёЁ]+/ig);

watchEffect(async() => {
  form.value.token = form.value.token != undefined 
        ? form.value.token.replace(incorrectToken.value, '')
        : '';
})

我也试着把不正确的符号替换成' '(不是''),结果很好用-西里尔符号变成了空格

rsaldnfx

rsaldnfx1#

要在键入时阻止不需要的符号,您可以使用'beforeinput'事件:

<template>
  <input @beforeinput="e => /[А-яёЁ]/.test(e.data) && e.preventDefault()">
</template>

https://play.vuejs.org/#eNqrVnIsKNArK01VslKyKUnNLchJLEm1i8lTULDJzCsoLVFwSEpNyy9KBXNsY5RSFWztFPSjL0zQvdh/ceKFxlh9vZLU4hKNVL2UxJJETQU1NYVUvYKi1LLUvBKX1LTE0pwSDc0YJaCJNvpw45VqAfFDKmo=

bbmckpt7

bbmckpt72#

我会写一些类似的东西,以便从我的文本输入中删除空格(我没有测试你的regExp删除西里尔符号)。您有 @input,它通过执行方法 updateInput 来触发input事件。在方法内部,您可以替换搜索的标记(在我的示例中是空格)并将值重新分配给输入。通常你只需要改变你的regexp。请注意,您有这个非常有用的网站来测试您的regexp:regex101

<template>
  <div id="app">
    <input :value="inputVal" type="text" @input="updateInput" />
  </div>
</template>

<script>
  export default {
  name: "App",
  data() {
    return {
      inputVal: "",
    };
  },
  methods: {
    updateInput(ev) {
      const incorrectToken = /\s/g;
      const inputValue = ev.target.value;
      if (inputValue) {
        ev.target.value = inputValue.replace(incorrectToken, "");
      }
    },
   },
  };
</script>

相关问题