输入框限制只能输入数字

最新推荐文章于 2025-08-05 00:23:33 发布

原创最新推荐文章于 2025-08-05 00:23:33 发布 · 767 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#数据结构

这段代码展示了如何在前端实现对用户输入的水箱容量进行验证，包括清除非数字字符、确保首位非小数点、限制最多一个小数点、最多16位长度等，确保输入符合规范。

proving(index) {
			// this.list[index].value 是输入框输入的值，这里是列表循环出来的输入框
			// 先把非数字的都替换掉，除了数字和.
			this.formDate.tankList[index].capacity = this.formDate.tankList[index].capacity.replace(
				/[^\d.]/g,
				'',
			)
			// 必须保证第一个为数字而不是.
			this.formDate.tankList[index].capacity = this.formDate.tankList[index].capacity.replace(
				/^\./g,
				'',
			)
			// 保证只有出现一个.而没有多个.
			this.formDate.tankList[index].capacity = this.formDate.tankList[index].capacity.replace(
				/\.{2,}/g,
				'',
			)

			// 保证.只出现一次，而不能出现两次以上
			this.formDate.tankList[index].capacity = this.formDate.tankList[index].capacity
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.')
			let count = -1
			for (let i in this.formDate.tankList[index].capacity) {
				if (this.formDate.tankList[index].capacity[i] === '.') {
					count = i
				}
				if (count !== -1) {
					if (i - count > 2) {
						this.formDate.tankList[index].capacity = this.formDate.tankList[
							index
						].capacity.substring(0, this.formDate.tankList[index].capacity.length - 1)
					}
				}
			}
			// 限制输入长度最多为16位
			if (this.formDate.tankList[index].capacity.length > 16) {
				this.formDate.tankList[index].capacity = this.formDate.tankList[
					index
				].capacity.slice(0, 16)
			}
		},

	<Input
		v-model="e.capacity"
		placeholder="请输入水箱容量"
		@on-keyup="proving(idex)"
		></Input>