uniapp微信小程序处理input框内容限制(小数点,负号,纯数字)

需求:input框中只能输入小数点 负号 纯数字。

官方无法通过type属性直接实现, 纯数字可以通过type=number, 小数点type=digit, 然而负号是没有的,微信小程序上表现是原生控件,只能使用text文本输入键盘。

          注意:@input事件需要return一个值去替换输入框里面的值,让其强制更新, 我因为没有return, 所以在第一次修改值成功,之后就一直没有成功,数据发生变化了,但是视图没有更新。 我还尝试在 input框上绑定一个 :key , 每次修改值 key++,这种强制更新无效。

具体代码:

<input class="uni-input inputClass" v-model="item.val" v-if="item.inputType==='textInput'"
								:disabled="item.disabled" type="text"
								@input="checkNum($event,mainboardFormList,index)" />
import { debounce, throttle } from 'lodash-es'; 

const checkNum = debounce(function (e : any, arr : formItemType[], index : number) {
		const inputValue = e.detail.value; // 获取输入框的值
		const formattedValue = formatInput(inputValue); // 格式化输入值
		nextTick(() => {
			// 检查是否为有效数字
			if (!isNaN(Number(formattedValue)) && formattedValue !== '') {
				const numericValue = parseFloat(formattedValue);
				arr[index].val = Math.min(Math.max(numericValue, -273), 300); // 限制范围
			} else {
				arr[index].val = 0; // 如果无效,设置为 0
				uni.showToast({
					icon: 'error',
					mask: true,
					duration: 2000,
					title: '输入格式错误,必须是数字'
				});
			}

		})
	}, 300)
	const formatInput = (value : any) => {
		if (!value) return '0'; // 如果为空,返回 '0'

		// 使用正则表达式过滤掉非法字符,只保留数字、小数点和负号
		let filteredValue = value.replace(/[^\d.-]/g, '');

		// 确保只有一个小数点
		const parts = filteredValue.split('.');
		if (parts.length > 2) {
			filteredValue = parts[0] + '.' + parts.slice(1).join('');
		}

		// 确保负号只在开头
		if (filteredValue.indexOf('-') > 0) {
			filteredValue = filteredValue.replace(/-/g, ''); // 移除多余的负号
			filteredValue = '-' + filteredValue; // 保留第一个负号
		}

		// 转换为数字并限制范围
		const num = parseFloat(filteredValue);
		if (isNaN(num)) return '0'; // 如果转换失败,返回 '0'

		return Math.min(Math.max(num, -273), 300).toString(); // 限制范围并返回字符串
	}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值