输入百分比校验(数字非负数保留2位不四舍五入)

发布于:2025-04-01 ⋅ 阅读:(19) ⋅ 点赞:(0)

场景用于输入百分比,限制只能输入非负数,保留2位小数,且不四舍五入

以下举例环境 vue2 + element-ui
请自行根据实际场景使用

html部分

<el-input
  v-model="item.percentage"
  placeholder="请输入"
  maxlength="5"
  @input="amountInput(item, 'percentage')"
>

js部分

amountInput(params, key) {
	// 清除"数字"和"."以外的字符
	const value = params[key].replace(/[^\d.]/g, '');
	params[key] = value;
	
	// 去除首个.
	if (value.length > 1 && ['.'].includes(value.substr(0, 1))) {
	  // console.log('==match:', value);
	  params[key] = value.substr(1);
	}
	
	// 保留2位不四舍五入
	if (value.length > 4 && value.indexOf('.') !== -1) {
	
	  console.log('==拼装=>', value.split('.')[0], value.split('.')[1].substring(0, 2));
	  params[key] = value.split('.')[0] + '.' + value.split('.')[1].substring(0, 2);
	}
	// 如果输入的数字前三位等于100 则不能输入第四位数字
	if (value.length >= 3 && value.indexOf('.') === -1 && value.substring(0, 3) == '100') {
	  params[key] = value.substring(0, 3);
	  return
	}
	
	// 最大输入100 如果输入的数字大于等于100则第三位不能在输入
	if (value.length >= 3 && value.indexOf('.') === -1 && value > 100) {
	  params[key] = value.substring(0, 2);
	}
	// 开头不能输入多个0
	if (value.length >= 2 && value.substring(0, 1) == '0' && value.substring(1, 2) != '.') {
	  params[key] = '0';
	}
	// 如果开头是一个.直接清空
	if (params[key] == '.') {
	  params[key] = '';
	}
	// 不能输入多个.
	if (value.split('.').length > 2) {
	  params[key] = value.split('.')[0] + '.' + value.split('.')[1];
	}
}