Uniapp实时监听input输入为数字

发表于 分类于 / Changyan：

测试要求提现的输入只能为数字+小数点，不许为其他：

解决方案

Wxml

1
2
3
4
5
6
7
<input
  type="number"
  :placeholder="placeTips"
  placeholder-style="font-size:24rpx"
  v-model="amount"
  @input="checkNum($event)"
/>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
checkNum(e) {
	let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
	console.log(val)
	if (!val) {
		this.amount = '';
		return
	}
	var reg = /[^\d.]/g

	// 只能是数字和小数点，不能是其他输入
	val = val.replace(reg, "")
	// // 保证第一位只能是数字，不能是点
	val = val.replace(/^\./g, "");
	// // 小数只能出现1位
	val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
	// // 小数点后面保留2位
	val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
	console.log(val);
	this.$nextTick(() => {
		this.amount = val;
	})
},