Vue限制输入框只能输入数字

发布时间：2023-05-21

一、Vue限制输入框只能输入数字和小数

在Vue中，我们可以通过正则表达式限制输入框只能输入数字和小数。具体实现方法如下：

// template
<template>
  <input type="text" v-model="inputNumber" :pattern="numberPattern">
</template>
// script
<script>
export default {
  data() {
    return {
      inputNumber: '',
      numberPattern: '^\\d+(\\.\\d{0,2})?$' // 正则表达式，限制小数点后最多两位
    }
  }
}
</script>

在上面的代码中，我们通过 v-model 绑定输入框的内容到 data 中的 inputNumber 变量中，通过 :pattern 属性绑定正则表达式到输入框中，限制输入框只能输入数字和小数点，并且小数点后最多只能有两位数字。

二、Vue限制输入框只能输入数字手机号

在实际开发中，我们经常需要限制输入框只能输入数字手机号。下面是实现方法：

// template
<template>
  <input type="text" v-model="phoneNumber" :maxlength="11" :pattern="phoneNumberPattern">
</template>
// script
<script>
export default {
  data() {
    return {
      phoneNumber: '',
      phoneNumberPattern: '^1[3|4|5|7|8][0-9]{9}$' // 正则表达式，限制只能输入11位数字手机号
    }
  }
}
</script>

上述代码中，我们通过 :maxlength 属性限制输入框只能输入11位手机号，通过 :pattern 属性绑定正则表达式，保证输入框中只能输入如 "13012345679" 格式的手机号码。

三、限制输入框只能输入数字

限制输入框只能输入数字是比较常见的需求，下面是Vue实现方法：

// template
<template>
  <input type="text" v-model="inputNumber" :pattern="numberPattern">
</template>
// script
<script>
export default {
  data() {
    return {
      inputNumber: '',
      numberPattern: '[0-9]*' // 正则表达式，限制只能输入数字
    }
  }
}
</script>

在上述代码中，我们通过 :pattern 属性绑定正则表达式，保证输入框中只能输入数字。

四、Vue输入框只能输入正整数

有时候，我们需要限制输入框只能输入正整数。在Vue中，可以这样实现：

// template
<template>
  <input type="text" v-model="integerNumber" :pattern="integerNumberPattern">
</template>
// script
<script>
export default {
  data() {
    return {
      integerNumber: '',
      integerNumberPattern: '[1-9]\\d*' // 正则表达式，限制只能输入正整数
    }
  }
}
</script>

在上述代码中，我们通过 :pattern 属性绑定正则表达式，保证输入框中只能输入正整数。

五、Vue输入框限制数字长度

有时候，我们需要限制输入框中数字的位数。可以这样实现：

// template
<template>
  <input type="text" v-model="inputNumber" :maxlength="maxNumberLength">
</template>
// script
<script>
export default {
  data() {
    return {
      inputNumber: '',
      maxNumberLength: 6 // 限制数字位数为6位
    }
  }
}
</script>

在上述代码中，我们通过 :maxlength 属性限制数字最多只能输入六位。

六、Vue输入框输入事件

在实际开发中，我们可能需要在用户输入时判断输入是否符合要求。Vue提供了 @input 事件来实现这个需求：

// template
<template>
  <input type="text" v-model="inputNumber" @input="onInputNumber">
</template>
// script
<script>
export default {
  data() {
    return {
      inputNumber: ''
    }
  },
  methods: {
    onInputNumber() {
      if (isNaN(this.inputNumber)) // 判断是否输入的为数字
        this.inputNumber = '';
    }
  }
}
</script>

上面的代码中，@input 事件绑定了 onInputNumber 方法，当用户输入时，如果输入的不是数字，则将输入框清空。

七、Vue输入框无法输入内容

有时候，我们需要在某些情况下禁止用户输入内容，可以通过Vue的 disabled 属性来实现：

// template
<template>
  <input type="text" v-model="inputNumber" :disabled="disableInput">
</template>
// script
<script>
export default {
  data() {
    return {
      inputNumber: '',
      disableInput: true // 禁止用户输入
    }
  }
}
</script>

在上述代码中，我们将 disabled 属性设为 true，从而禁止用户输入内容。

八、Vue 输入框限制两位小数

有时候，我们需要限制输入框中小数点后最多只能有两位，可以这样实现：

// template
<template>
  <input type="text" v-model="inputNumber" @input="onInputNumber">
</template>
// script
<script>
export default {
  data() {
    return {
      inputNumber: ''
    }
  },
  methods: {
    onInputNumber(event) {
      let value = event.target.value;
      value = value.replace(/[^\d.]/g, '');  // 清除"数字"和"."以外的字符
      value = value.replace(/^\./g, '');     // 验证第一个字符是数字而不是
      value = value.replace(/\.{2,}/g, '.'); // 只保留第一个小数点，清除多余的
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 限制只能输入两位小数
      event.target.value = value;
      this.inputNumber = value;
    }
  }
}
</script>

在上面的代码中，我们通过 @input 事件捕捉用户输入，然后用正则表达式去除不符合要求的字符，最后限制小数点后只能有两位。

九、Vue输入框禁止输入选取

在实际开发中，我们可能需要限制用户只能通过输入来改变输入框中的内容，不能通过选取来改变内容。Vue提供了 @select 事件实现这个需求：

// template
<template>
  <input type="text" v-model="inputNumber" @select="onSelect">
</template>
// script
<script>
export default {
  data() {
    return {
      inputNumber: ''
    }
  },
  methods: {
    onSelect() {
      window.getSelection().removeAllRanges(); // 防止用户通过选取来改变输入框内容
    }
  }
}
</script>

在上述代码中，我们通过 @select 事件捕捉用户的选取动作，并调用 window.getSelection().removeAllRanges() 方法来禁止用户通过选取来改变输入框内容。

推荐文章