前端入门即教学，今天博主分享几个前端金额实用的小案例，复制拿过去就能用哦！
相信有很多前端小伙伴在工作中遇到过这样的需求，就是限制输入框内容只能输入两位小数吧，想了用正则但是又不知道怎么下手的同学，接下来博主分享一个小案例，下次遇到这个的时候就一点也不慌了。
/**
* @param row //当前输入行
* @param index //当前输入字段
* @param istype //是否可以输入负号 例传'1'可以输入负号
*/
function limitedAmount(row,index,istype){
const t = row[index].charAt(0);
const x = row[index].charAt(1);
if(t =='0' && x!='.' && row[index].length>1) row[index] = row[index].substr(1,row[index].length);
row[index] = row[index].replace(/[^\d.]/g, '');
// 必须保证第一个为数字而不是.
row[index] = row[index].replace(/^\./g, '');
// 保证只有出现一个.而没有多个.
row[index] = row[index].replace(/\.{2,}/g, '.');
// 保证.只出现一次，而不能出现两次以上
row[index] = row[index].replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
// 保证 只允许输入两位小数
row[index] = row[index].replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
// 如果你想保留4位小数把上面两位小数注释掉 用下面这句就行了
// row[index] = row[index].replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/,'$1$2.$3');
if(istype !='1') return;
// 如果第一位是负号，则允许添加
if (t == '-') {
row[index] = '-' + row[index]
}
}如果只能输入0和正整数，用下面代码就可以实现：
/**
* 只能输入0和正整数
* @param row // 当前行
* @param index // 当前字段
* @param type // 是否可以输入 0 默认否
*/
function checkOnlyInputInteger(row,index,type){
const t = row[index].charAt(0);
if(t =='0' && !type) row[index] = row[index].substr(1,row[index].length);
row[index] = row[index].replace(/[^0-9]/g,'');
}上面是针对input 输入框对输入做的限制，下面我们对金额的保留和展示格式做一下处理，表格金额保留两位小数，如果是百分比展示百分号的处理：
/**
* 表格金额保留两位小数
* @param val // 当前值
* @param isRata // 是否百分号展示
*/
function setAmountFormat(val,isRata){
if(isRata =='1') return parseFloat(val*100).toFixed(2) +'%';
if(val) return parseFloat(val).toFixed(2)||'';
}如果有小伙伴需要把金额展示为千分位的方式去展现的可以用以下代码去实现：
function thousand(num) {
<!-- 千分符正则表达式 -->
return (num + "").replace(/\d(?=(\d{3})+$)/g, "$&,")
}
console.log(thousand(123456789))金额去除千分位：
function rmoney(e) {
if (e) {
return parseFloat(e.replace(/[^\d\.-]/g, ''));
} else {
return 0;
}
} 好了到这里博主主要讲了一些工作中常用的金额处理方式，如果还有其他需求的小伙伴欢迎
找博主交流探讨，快乐的时光总是短暂的，这期我们的分享就到这里了，小伙伴们动动发财
的小手点赞加关注，这不仅是对博主的支持也是对知识的渴望！山水有相逢咋们下期见！！！文章来源：https://www.toymoban.com/news/detail-427543.html
文章来源地址https://www.toymoban.com/news/detail-427543.html
到了这里，关于input 输入框限制只能输入两位有效小数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
