VueJ를 사용하여 텍스트 영역의 일부 문자를 차단하려면 어떻게 해야 합니까?

VueJ를 사용하여 텍스트 영역의 일부 문자를 차단하려면 어떻게 해야 합니까?

메시지를 보내기 위한 텍스트 영역이 있으며 이메일과 사이트 링크를 차단하고 싶습니다.그래서 제가 글을 쓸 때@또는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>

regex 타입으로 상태를 확인할 수 있습니다.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>

텍스트 영역에 메서드 @change 또는 @input을 추가한 후 regex를 사용하여 모든 것을 테스트합니다.

언급URL : https://stackoverflow.com/questions/54799984/how-can-i-block-some-characters-in-a-textarea-with-vuejs