解决Uniapp 小程序 input框添加正则 限制只能输入数字
时间: 2023-07-25 16:38:29 浏览: 321
您好,要实现在Uniapp小程序中input框只能输入数字,可以通过以下方式添加正则表达式限制:
1. 在input标签中添加onInput事件监听:
```html
<input type="number" @input="onInput"/>
```
2. 在Vue组件中添加onInput事件处理函数,并在该函数中使用正则表达式过滤非数字字符:
```js
methods: {
onInput(event) {
let inputVal = event.target.value;
inputVal = inputVal.replace(/[^\d]/g, ''); // 正则表达式过滤非数字字符
event.target.value = inputVal;
}
}
```
这样就能实现在Uniapp小程序中input框只能输入数字的限制。如果您不想使用type为number的input,可以使用正则表达式限制input框只能输入数字:
```html
<input type="text" @input="onInput"/>
```
```js
methods: {
onInput(event) {
let inputVal = event.target.value;
inputVal = inputVal.replace(/[^\d]/g, ''); // 正则表达式过滤非数字字符
event.target.value = inputVal;
}
}
```
以上代码中,使用了JavaScript的replace方法和正则表达式/[^\d]/g,将所有非数字字符替换为空字符串。
阅读全文