EnlightenCode

Vue中实现input输入限制的多种方法 ​

在前端开发中，对输入框的内容进行限制是很常见的需求。本文介绍两种在Vue中实现input输入限制的方法。

方法一：使用原生事件 ​

  1. 限制只能输入数字
js
<input onkeyup="value=value.replace(/[^\d]/g,'')" />
  1. 限制输入值的大小
js
<input onkeyup="if(value > 99)value=99" />
  1. 使用addEventListener
javascript
const input = document.querySelector('input');
input.addEventListener('input', function(e) {
    // 在这里添加限制逻辑
});

方法二：使用Vue的watch（推荐） ​

在Vue项目中，我们可以利用watch监听器来实现更灵活的输入限制：

vue
<template>
  <input type="text" v-model="dataInput"/>
</template>

<script>
export default {
  data() {
    return {
      dataInput: ''
    }
  },
  watch: {
    dataInput(newValue, oldValue) {
      // 示例1：限制最大值为9999
      if (newValue > 9999) {
        this.dataInput = 9999
        return
      }

      // 示例2：只允许输入正整数（禁止0开头）
      const reg1 = /^(0+)|[^\d]+/g
      this.dataInput = newValue.replace(reg1, '')

      // 示例3：限制只能输入正数且最多两位小数
      const reg2 = /^\D*(\d*(?:\.\d{0,2})?).*$/g
      this.dataInput = newValue.replace(reg2, '$1')
    }
  }
}
</script>

注意事项 ​

  1. 使用原生方法虽然简单，但不够灵活，且可能会影响Vue的响应式特性
  2. watch方法更符合Vue的设计理念，便于维护和扩展
  3. 正则表达式说明：
    • [^\d]: 匹配非数字字符
    • ^(0+): 匹配开头的连续0
    • \d*(?:\.\d{0,2})?: 匹配整数部分和最多两位小数

总结 ​

在Vue项目中，推荐使用watch方法来实现输入限制，这样可以：

  • 更好地控制数据流
  • 实现更复杂的验证逻辑
  • 保持代码的可维护性