input限制小数最大输入位数,以及限制只能输入数字

原创于 2024-01-23 10:44:10 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #java

基础知识专栏收录该内容

5 篇文章

订阅专栏

该篇文章介绍了如何在前端开发中处理input事件时，对输入的数值进行小数位数限制、最大值和最小值校验，使用正则表达式确保输入格式正确。

input限制小数输入位数最大值,以及限制只能输入数字, 例如,限制4位, 这输入0.12345, 会直接截取前四位, 0.1234, 后续直接丢弃


/*
value:input事件绑定返回的值
field:字段, 后续更改值使用
maxQut:最大值
minQut:最小值
*/
const fieldInput = (value, field, maxQut, minQut) => {
		// 正则限制只能输入数字, 包括正数负数浮点数
		value = (value + '').replace(/[^\.0-9\-]/g, '')
			.replace(/^\./g, '') //第一个字符不能是.
			.replace(/\.{2,}/g, '.') // 不能连续输入.
			.replace(/\-{2,}/g, '-') // -只能保留一个
			.replace(/(\.\d+)\./g, '$1') // .后面不能再输入.
			.replace(/(-)\./g, '$1') // -后面不能输入.
			.replace(/(\d+|\.)-/g, '$1') // 数字和.后面不能接-
			.replace(/-(0){2,}/g, "$1") // 不能出现-00,-001,-0001类似
			.replace(/(-)0+(\d+)/g, '$1$2') // 不能出现-01,-02类似
			.replace(/^0+(\d)/, '$1') // 第一位0开头，0后面为数字，则过滤掉，取后面的数字


		// 动态限制输入位数 baseInfo.value?.accuracy小数最大位数存储的字段
		if (baseInfo.value?.accuracy || baseInfo.value?.accuracy == 0) {
			// 分割整数和小数部分
			var parts = value.split('.');
			var integerPart = parts[0];
			var decimalPart = parts[1] || '';
			// 等于0的情况, 取整数
			if (baseInfo.value?.accuracy === 0) {
				value = integerPart
			}
			// 大于指定位数的处理
			if (decimalPart.length > baseInfo.value.accuracy) {
				decimalPart = decimalPart.substring(0, baseInfo.value.accuracy);
			    value = decimalPart ? integerPart + '.' + decimalPart : integerPart;
			}
		}

		// 最大值限制
		if (maxQut !== (undefined || null) && value * 1 > maxQut * 1) {
			value = maxQut
		}
		// 最小值
		if (minQut !== (undefined || null) && value * 1 < minQut * 1) {
			value = minQut
		}

		// 赋值
		nextTick(() => {
			checkInfoForm.value[field] = value ? value : 0
		})

	}