首页el-input只能输入数字1-99

el-input只能输入数字1-99

时间: 2025-01-22 17:08:22 浏览: 58

### 实现Element UI `el-input`组件仅允许输入1到99之间数字的方法为了实现这一功能，可以在监听`@input`事件的同时利用正则表达式以及逻辑判断来确保用户的输入始终处于指定范围内。下面提供了一种基于Vue.js框架下的解决方案： ```html <template> <div>  <el-input v-model="numberValue" @input="validateNumber"></el-input> </div> </template> <script> export default { data() { return { numberValue: '' }; }, methods: { validateNumber(newValue) { let num = newValue.replace(/[^0-9]/g, ''); // 移除非数字字符 if (num.length === 2 && parseInt(num.charAt(0), 10) >= 1) { // 当长度为两位时检查第一位是否大于等于1 num = Math.min(parseInt(num, 10), 99); // 如果超过99，则设为99 } else if (num.length > 2 || (num.length === 1 && parseInt(num, 10) === 0)) { // 处理超出范围的情况或单个零 num = ''; } this.numberValue = String(num); } } }; </script> ``` 此代码片段通过移除任何非数字字符，并根据当前字符串的长度应用不同的规则来保持数值在1至99之间。对于两个字符以上的输入或是单独的一个'0'，都将被清空；而对于有效的双位数，如果它超过了上限99，则会被自动调整为此区间的最大值。

阅读全文