I want made a validation for input to be number only, whenever someone input a string, the input box will be cleared.

First, I made a method function on $event like this (ps. I use props)

<BaseInput
      :value="nama"
      @update="nama = ruled($event)"
      label="Nama"
      type="type"
/>

and this is the method, I use RegExp to check if the $event value is number. When it's false then I return $event value to empty string.

ruled(event) {
  console.log(event)

  var intRegex = new RegExp(/[0-9]/);
  var data = intRegex.test(event)
  if(!data) {
      alert("Value Must Number")
      event = ""
      console.log('masuk if'   data)
  }
  return event
}

but it didn't clear the input box, anyone know why it happened ?

CodePudding user response：

Suggestions :

• Instead of @update you have to use @keypress or @change.
• You can use v-model for two-way data binding.

Working Demo :

new Vue({
  el: '#app',
  data: {
    nama: ''
  },
  methods: {
    ruled(event) {
      var intRegex = new RegExp(/^\d $/);
      var data = intRegex.test(this.nama);
      if (!data) {
        alert("Value must contain number");
        this.nama = "";
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input
      v-model="nama"
      @change="ruled($event)"
      label="Nama"
      type="text"
  />
</div>

CodePudding user response：

As Creative Learner said, I must clearing input box in child component only, so I did this on my component child

<template>
<input
  :value="value"
  :placeholder="label"
  @input="$emit('update', ruled($event))"
/>
</template>

And this is the methods:

    methods: {
      ruled(event) {
        //console.log(event)
            var val = event.target.value
            if(event.target.type == "number"){
                var intRegex = new RegExp(/[0-9]/);
                var intdata = intRegex.test(val)
                    if(intdata == false) {
                        error = "Value must contain number"
                        //alert("Value must contain number")
                        return event.target.value = ""
                    }
            }
      return val
      }
  }

great thanks to Creative Learner who made me understand