input输入框只能输入数字且保留两位小数场景演练(金额)

简介: input输入框只能输入数字且保留两位小数场景演练(金额)

以下方法看自己用的ui需求的需求增加不同的方法

1、给文本框增加一个onChange方法,

//   针对输入的金额做特殊处理
const onCustomMoneyValidate = (e) => {
    e.target.value = e.target.value.replace(/[^\d.]/g, ''); // 只能输入"数字"和"."
    e.target.value = e.target.value.replace(/^\./g, ''); // 第一位字符不能为"."
    e.target.value = e.target.value.replace(/\.{2,}/g, '.'); // 只保留第一个. 清除多余的
    e.target.value = e.target.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 只能输入一个小数点且只保留一个
    e.target.value = e.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两位小数
    if (e.target.value.indexOf('.') < 0 && e.target.value !== '')
      e.target.value = parseFloat(e.target.value); // 以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额
    // TODOS 做赋值操作
};

2、对金额最后是小数点的情况做特殊处理

//  失焦规整金额(防止最后一位是小数点的情况)  payMoney是绑定的input的值
const onCustomBlurRegular = () => {
    if (payMoney && payMoney.substr(payMoney.length - 1, 1) === '.') {
      let newVal = payMoney.substr(0, payMoney.length - 1);
      // TODOS 做重新赋值操作
    }
};

3、金额最后如果是小数点做拓展(看需求)

for(let i = 0; i < payMoeny.length; i++) {
  if(payMoeny.charAt(0) == '0' && payMoeny.charAt(1) != '.') {
    payMoeny = payMoeny.substring(1);  // 把第一个字符去掉,返回剩余部分
  } else {
  }
  if(payMoeny.charAt(payMoeny.length - 1) == '.') payMoeny = payMoeny + '00' // 后面加上00
}

交流

公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

相关文章
|
7月前
|
C#
C# DEV TextEdit 设置文本框只能输入数字(整数)
C# DEV TextEdit 设置文本框只能输入数字(整数)
|
5月前
|
JavaScript
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
291 7
|
7月前
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
1202 0
el-input限制输入整数等分析
用输入框输入一个成绩,来判断 成绩的等级 90-100分为优秀,70-89为良好,60-69为及格,60分以下为还需要继续努力,当输入为非数字的时候显示非法字符。
用输入框输入一个成绩,来判断 成绩的等级 90-100分为优秀,70-89为良好,60-69为及格,60分以下为还需要继续努力,当输入为非数字的时候显示非法字符。
419 0
|
7月前
|
Python
通过用户输入数字,并计算二次方程
通过用户输入数字,并计算二次方程
正则表达式显示input框只能输入数字或者保持小数点后两位
正则表达式显示input框只能输入数字或者保持小数点后两位
337 0
input输入框输入只能输入数字、字母等组合的正则表达式
input输入框输入只能输入数字、字母等组合的正则表达式
695 0
输入1-5为工作日,输出6-7为休息日
输入1-5为工作日,输出6-7为休息日
189 0
输入1-5为工作日,输出6-7为休息日
【C#】【假条生成系统】【单位剖析】如何判断在文本框输入了几个人名?
【C#】【假条生成系统】【单位剖析】如何判断在文本框输入了几个人名?
99 0
【C#】【假条生成系统】【单位剖析】如何判断在文本框输入了几个人名?