Two implementation methods for el-input restricting input positive integers

el-input limits input positive integer

The el-input box is an input box component in the Element UI library that receives user input. If you want to limit the el-input box to only enter numbers, it can be implemented in the following two ways:

1. Use type attribute: Set the type attribute of el-input to "number", which forces the input box to accept only numeric input. The sample code is as follows:

<el-input type="number"></el-input>

2. Use regular expressions to limit input: By using regular expressions, the input content can be checked in the input event of el-input, and only numeric inputs are allowed. The sample code is as follows:

<template>
  <el-input v-model="inputValue" @input="handleInput"></el-input>
</template>
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput() {
       = (/\D/g, '');
    }
  }
};
</script>

input Several methods to control input integers

There are several methods:

1. Positive integer greater than 0

      <el-input   oninput="value=(/^0(0+|\d+)|[^\d]+/g,'')"></el-input>

2. More than 500 will be set to 500 (an integer less than 500)

<el-input placeholder="Please enter quantity" v-model="" type="number"
          oninput="value=(/[^\d]/g,'');if(value>500)value=500;" >

3. Numbers with two decimal places

  <el-input  oninput="value=(/^\d+(?:\.\d{0,2})?/);"></el-input>

4. You can enter four decimal places

     <el-input   oninput="value=(/^\d+(?:\.\d{0,4})?/);"></el-input>

5. If it is less than 1, set the value to 1

    <el-input   oninput="value=(/[^\d]/g,'');if(value<1)value=1"></el-input>

6. Enter integers

<strong>Integer：<el-input  </strong>oninput="value=(/[^\d]/g,'');"></el-input>

In the above code, the @input event binds the handleInput method, which uses a regular expression to replace non-numeric characters with an empty string, thus achieving the effect of only entering numbers.

This is the end of this article about el-input restricting positive integer input. For more related contents of el-input input, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!