Vue.js: Only allow numbers in range with one decimal

Question

I'm having a problem when trying to allow only numbers (it could be with one dot and one decimal) and numbers must be between 0 and 10. Examples:

2 -> allowed
8.5 -> allowed
7.14 -> not allowed
7.1 -> allowed
10.1 -> not allowed
10 -> allowed
15.2 -> not allowed

First of all, here is a piece of code:

HTML:

JavaScript:

restrictScoreValue($event) {
  const keyCode = ($event.keyCode ? $event.keyCode : $event.which)

  // only allow number and one dot
  if ((keyCode < 48 || keyCode > 57) && (keyCode !== 46 || this.userDto.score.indexOf('.') !== -1)) { // 46 is dot
     $event.preventDefault()
  }

  // restrict to 1 decimal place
  if (this.userDto.score !== null && this.userDto.score.indexOf('.') > -1 && (this.userDto.score.split('.')[1].length > 0)) {
    $event.preventDefault()
  }
}

It works allowing only numbers and one decimal after the dot. But it doesn't work allowing only numbers between 0 and 10 (I can input a lot of numbers before the dot), and if I paste an incorrect score (example: 15.43) it allows.

How can I improve the code to fit the requirements?

user_6595551 · Answer

I came up with this solution. Using :formatter solves your issue with the reactivity of b-form-input, and so there is no need to remove it. I have a configurable validation variable that you can configure and adjust your validation to set the max, min, and decimal values.

new Vue({
  el: "#app",
  data: function() {
    return {
      value: 0,
      last_value: 0,
      validation: {
        min: 0,
        max: 10,
        decimal: 10
      }
    }
  },
  methods: {
    format_number(e) {
      if (e > this.validation.max) {
        return this.validation.max
      } else if (e < this.validation.min) {
        return this.validation.min
      } else if (Math.round(e * this.validation.decimal) / this.validation.decimal != e) {
        return this.last_value
      } else {
        this.last_value = e
        return e
      }
    }
  }
});

Vue.js: Only allow numbers in range with one decimal

1 Answers