在Vue.js中实现输入框只能输入数字，可通过监听input事件并结合正则表达式过滤非数字字符，常用方法为：在模板中使用@input事件触发处理函数，通过/[^0-9]/g正则匹配并移除所有非数字字符，再将处理后的值绑定到v-model，在methods中定义handleInput方法，使用$event.replace(/[^0-9]/g, '')替换非法字符，确保输入值仅含数字，若需限制小数，可调整正则为/[^0-9.]/g并额外校验小数点唯一性，保障数据格式正确，此方法简单高效，适用于表单数字输入场景。
Vue.js 中实现输入框仅允许数字的正则表达式实践指南
在 Web 开发中，表单输入的格式限制是常见需求，比如手机号、年龄、数量等字段需要确保用户输入的是纯数字，Vue.js 作为主流的前端框架，结合正则表达式可以轻松实现这一功能，本文将详细介绍如何在 Vue.js 中使用正则表达式限制输入框仅允许数字，涵盖不同场景（纯数字、带负数、带小数等）的实现方法及常见问题解决方案。
为什么需要限制输入框仅允许数字？
数字输入限制的核心目的是保证数据格式正确性,避免无效数据进入后端系统。
- 年龄字段输入字母会导致数据统计错误；
- 商品数量输入非数字可能引发订单异常；
- 金额字段输入非法字符会影响财务计算。
通过前端限制，不仅能提升用户体验（减少用户手动修改错误的成本），还能减轻后端数据校验的压力,确保数据质量。
常用数字正则表达式
在实现数字限制前,先明确不同场景下的正则表达式规则：
纯数字（非负整数）
仅包含 0-9 的数字，如 123、0、4567。
正则表达式：/^\d+$/
^：匹配字符串开头；\d：匹配任意数字（0-9）；- 匹配前一个字符 1 次或多次；
- 匹配字符串结尾。
整数（可正负）
包含正负号 + 数字，如 -123、+456、789。
正则表达式：/^[+-]?\d+$/
[+-]?：正号或负号出现 0 次或 1 次（ 表示 0 次或 1 次）。
非负整数（含 0）
与纯数字一致，即 /^\d+$/（注意：0 是合法的）。
小数（可正负，保留 N 位小数）
如 -12.34、+5.6、78（保留 2 位小数时，小数部分超过 2 位会被截断）。
正则表达式（保留 2 位小数）：/^[+-]?\d+(\.\d{1,2})?$
\.\d{1,2}：匹配 1 到 2 位小数（\.匹配小数点，\d{1,2}匹配 1-2 位数字）；- 若保留 N 位小数，将
{1,2}改为{1,N}即可。
仅正数小数
不含负号的小数，如 34、5。
正则表达式（保留 2 位小数）：/^\d+(\.\d{1,2})?$
在 Vue.js 中实现数字限制的常用方法
结合正则表达式，Vue.js 中可以通过以下 3 种方式实现输入框仅允许数字：
方法 1：使用 @input 事件 + 正则替换（推荐）
通过监听输入框的 input 事件，在用户输入时实时过滤非数字字符，这是最常用且灵活的方式，支持纯数字、带负数、带小数等多种场景。
示例 1：纯数字输入（如年龄）
<template>
<div>
<label>年龄：</label>
<input
type="text"
v-model="age"
@input="handleInput"
placeholder="请输入数字"
>
<p>当前值：{{ age }}</p>
</div>
</template>
<script>
export default {
data() {
return {
age: ''
};
},
methods: {
handleInput(event) {
// 替换所有非数字字符（仅保留 0-9）
this.age = event.target.value.replace(/\D/g, '');
}
}
};
</script>
说明：
@input会在输入框值改变时触发（包括键盘输入、粘贴等）；/\D/g是正则表达式，\D匹配非数字字符（0-9 以外的字符），g表示全局匹配（替换所有非数字字符，而不仅仅是第一个）。
示例 2：带负数的小数输入（如金额）
<template>
<div>
<label>金额：</label>
<input
type="text"
v-model="amount"
@input="handleAmountInput"
placeholder="请输入金额（如 -12.34）"
>
<p>当前值：{{ amount }}</p>
</div>
</template>
<script>
export default {
data() {
return {
amount: ''
};
},
methods: {
handleAmountInput(event) {
// 允许负号、数字和小数点
this.amount = event.target.value.replace(/[^\d.-]/g, '');
// 确保只有一个负号（在最前面）
const negativeIndex = this.amount.indexOf('-');
if (negativeIndex > 0) {
this.amount = '-' + this.amount.replace(/-/g, '');
}
// 确保只有一个小数点
const decimalIndex = this.amount.indexOf('.');
if (decimalIndex > 0 && this.amount.indexOf('.', decimalIndex + 1) > 0) {
this.amount = this.amount.substring(0, decimalIndex + 1) +
this.amount.substring(decimalIndex).replace(/\./g, '');
}
}
}
};
</script>
方法 2：使用 @keydown 事件 + 事件阻止
通过监听 keydown 事件，阻止非数字按键的默认行为,适用于简单的数字输入场景。
<template>
<div>
<label>数量：</label>
<input
type="text"
v-model="quantity"
@keydown="handleKeydown"
placeholder="请输入数量"
>
<p>当前值：{{ quantity }}</p>
</div>
</template>
<script>
export default {
data() {
return {
quantity: ''
};
},
methods: {
handleKeydown(event) {
// 允许的按键：数字、退格、删除、方向键、Tab
const allowedKeys = [
'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight',
'Tab', 'Enter', 'Home', 'End'
];
// 如果不是数字键且不在允许的按键列表中，阻止默认行为
if (!/\d/.test(event.key) && !allowedKeys.includes(event.key)) {
event.preventDefault();
}
}
}
};
</script>
方法 3：使用计算属性 + v-model
通过计算属性自动过滤非数字字符,适用于需要双向绑定且数据需要自动校验的场景。
<template>
<div>
<label>单价：</label>
<input
type
