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

司徒小北

已于 2022-04-19 14:13:38 修改

阅读量1k

点赞数

分类专栏： react Vue JavaScript 文章标签： input金额 input输入数字和小数点 input输入小数点 input验证 input输入金额

于 2021-11-20 18:16:01 首次发布

本文链接：https://blog.csdn.net/weixin_42333548/article/details/121443169

版权

JavaScript 同时被 3 个专栏收录

55 篇文章 5 订阅

订阅专栏

Vue

49 篇文章 1 订阅

订阅专栏

react

34 篇文章 2 订阅

订阅专栏

以下方法看自己用的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
}