如何使用VueJs阻止textarea中的某些字符？

Question

I have a textarea for sending messages and I wanna block emails and site links. So when I write an @ or https:// there must be error messages shown, using v-if, but how can I do this? Which functions?

 new Vue({ el: "#app", data: { message: { content: "" } }, }) 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <textarea v-bind="message" v-model="message.content" cols="30" rows="10"> </textarea> <p v-if="message.content == '@'"> No special characters </p> </div> </div> 

Answer 1

You can check by regex type , for your condition var regex = /(@|https)/g; . Also set hasError data for message display control and you can use vue watch for your data changing (message.content)

 new Vue({ el: "#app", data: { message: { content: "" }, hasError: false }, watch: { 'message.content': function(newVal,oldVal) { var regex = /(@|https)/g; this.hasError = newVal.match(regex); } } }) 

 body { background: #20262E; padding: 10px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 10px; transition: all 0.2s; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <textarea v-bind="message" v-model="message.content" cols="30" rows="5"> </textarea> <p v-if="hasError"> No special characters </p> </div> </div> 

Answer 2

我认为你应该将方法@change或@input添加到textarea，然后使用正则表达式测试所有内容，然后替换它或者你想做的任何事情