title: Vue.js: Only allow numbers in range with one decimal
body: <p>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:</p>
  <ul>
  <li>2 -&gt; allowed</li>
  <li>8.5 -&gt; allowed</li>
  <li>7.14 -&gt; not allowed</li>
  <li>7.1 -&gt; allowed</li>
  <li>10.1 -&gt; not allowed</li>
  <li>10 -&gt; allowed</li>
  <li>15.2 -&gt; not allowed</li>
  </ul>
  <p>First of all, here is a piece of code:</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;b-form-input
    v-model=&quot;userDto.score&quot;
    @keypress=&quot;restrictScoreValue&quot;
    type=&quot;number&quot;
    min=0
    max=10
  /&gt;
  </code></pre>
  <p><strong>JavaScript:</strong></p>
  <pre><code>restrictScoreValue($event) {
    const keyCode = ($event.keyCode ? $event.keyCode : $event.which)
  
    // only allow number and one dot
    if ((keyCode &lt; 48 || keyCode &gt; 57) &amp;&amp; (keyCode !== 46 || this.userDto.score.indexOf('.') !== -1)) { // 46 is dot
       $event.preventDefault()
    }
  
    // restrict to 1 decimal place
    if (this.userDto.score !== null &amp;&amp; this.userDto.score.indexOf('.') &gt; -1 &amp;&amp; (this.userDto.score.split('.')[1].length &gt; 0)) {
      $event.preventDefault()
    }
  }
  </code></pre>
  <p>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.</p>
  <p>How can I improve the code to fit the requirements?</p>