如何使用VueJ阻止文本区域中的某些字符?

时间:2019-02-21 05:41:26

标签: javascript vuejs2 textarea

我有一个用于发送消息的文本区域,我想阻止电子邮件和站点链接。因此,当我编写@https://时,必须使用v-if显示错误消息,但是我该怎么做?哪些功能?

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>

2 个答案:

答案 0 :(得分:2)

您可以按正则表达式类型检查条件var regex = /(@|https)/g;。同时设置hasError数据以进行消息显示控制,您可以使用vue watch进行数据更改(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>

答案 1 :(得分:0)

我认为您应该在textarea中添加方法@change或@input,然后使用正则表达式测试所有内容,而不是替换它或您想要执行的任何操作