[Vuejs]-How to handle warnings on input textbox for using special characters using Vuejs

new Vue({

  el: '#app',
  data: {
    product: '',
    showWarning: false,
  },
  methods: {
    scanProductId(){
      if(this.product != ''){
        if(this.validateInput(this.product)){
          // console.log(this.product);
          this.showWarning = false;
        } else {
          this.showWarning = true;
        }
      }
    },
    validateInput(str) {
        let code, i, len;
        for (i = 0, len = str.length; i < len; i++) {
            code = str.charCodeAt(i);
            if (!(code > 47 && code < 58) && // numeric (0-9)
                !(code > 64 && code < 91) && // upper alpha (A-Z)
                !(code > 96 && code < 123)) { // lower alpha (a-z)
                return false;
            }
        }
        return true;
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

<Input
  v-model="product"
  placeholder="Enter here"
  style="width: 300px; height:30px"
  @keyup="scanProductId" />
<div v-if="showWarning" style="color:orange">Please make sure that no special chertors</div>
  
</div>