Question 177742 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can Vue do realtime regex pattern replacement in Javascript?

I’m very new in Vue and need to validate input. So, in this field should not be Cyrillic symbols, that’s why I use .replace method in watchEffect hook. Unfortunately, when I type Cyrillic symbols, they appear in input field, but I want them to remove immediately. Maybe you know how to do it?

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

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

Also I’ve tried to replace incorrect symbols to ‘ ‘ (not to ”) and it works – cyrillic symbols changed to spaces

Tags:

2

Answers


  1. 0

    To block unwanted symbols during typing you could use ‘beforeinput’ event:

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

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

    Login or Signup to reply.
  2. 0

    I would wrote something like that in order to remove space from my text input (I did not test your regExp to remove Cyrillic symbols).
    You have the @input that triggers the input event by executing the method updateInput. Inside the method you can replace the token you search (in my exemple a space) and reassign the value to the input. Normally you just have change the regexp by yours.
    Note that you have this very useful website to test your 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search