英文:
Realtime regex pattern replacement in Vue
问题
我是非常新的Vue用户，需要验证输入。因此，在这个字段中不应该有西里尔字母，这就是为什么我在watchEffect钩子中使用.replace方法。不幸的是，当我输入西里尔字母时，它们会出现在输入字段中，但我希望它们立即被删除。也许你知道怎么做？
const incorrectToken = ref(/[А-яёЁ]+/ig);
watchEffect(async () => {
form.value.token = form.value.token != undefined
? form.value.token.replace(incorrectToken.value, '')
: '';
})
此外，我也尝试将不正确的符号替换为空格而不是''，这样做是有效的 - 西里尔字母会被更改为空格。
英文:
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
答案1
得分: 1
To block unwanted symbols during typing you could use the 'beforeinput' event:
<template>
<input @beforeinput="e => /[А-яёЁ]/.test(e.data) && e.preventDefault()">
</template>
https://play.vuejs.org/#eNqrVnIsKNArK01VslKyKUnNLchJLEm1i8lTULDJzCsoLVFwSEpNyy9KBXNsY5RSFWztFPSjL0zQvdh/ceKFxlh9vZLU4hKNVL2UxJJETQU1NYVUvYKi1LLUvBKX1LTE0pwSDc0YJaCJNvpw45VqAfFDKmo=
英文:
To block unwanted symbols during typing you could use 'beforeinput' event:
<template>
<input @beforeinput="e => /[А-яёЁ]/.test(e.data) && e.preventDefault()">
</template>
答案2
得分: 1
我会这样写代码以从我的文本输入中移除空格（我没有测试你的正则表达式来移除西里尔字母符号）。
你有一个 @input 触发输入事件的输入，通过执行方法 updateInput。在这个方法内，你可以替换你要搜索的标记（在我的示例中是一个空格），然后重新赋值给输入。通常，你只需要将正则表达式更改为你自己的。
注意，你可以使用这个非常有用的网站来测试你的正则表达式：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>
<details>
<summary>英文:</summary>
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][1]
<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>
[1]: https://regex101.com/
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论