将输入的字符串转化为合法金额
- 不允许数字和点之外的字符。
- 金额头不允许多个0。
- 如果金额大于1，不能以零开头。
- 如果金额小于1，需要以零开头，即不允许以点开头。
- 只允许一个小数点。
- 必须（至少）保留两位小数，多于两位小数时去掉两位小数后多余的尾零。
- 千分位显示（加逗号）。
【代码清单】
/*金额处理校验函数*/
function check(val){
val = val.replace(/[^\d\.]/g, ''); //去掉非法字符
/^0+([0-9]+)/.test(val)&&(val=RegExp.$1);//去零（数字前的零）
/^\..*/.test(val)&&(val="0"+val);//小数点开头补零
/^(.*\..*)\.$/.test(val)&&(val=RegExp.$1);//去掉多余的小数点
/^(.*\.\d\d).*$/.test(val)&&(val=RegExp.$1);//只保留两位小数
return val;
}
/*金额规格化*/
function regular(val){
/^(.*)\.$/.test(val)&&(val=RegExp.$1);//以点结尾去点
/^(\d)+$/.test(val)&&(val=val+".00");//整数补.00
/^.*\.[0-9]$/.test(val)&&(val=val+"0");//一位小数补0
/^(.*\.\d\d(\d*[0-9])*)0+$/.test(val)&&(val=RegExp.$1);//去掉两位小数后的多余的0
return val;
}
/*金额千分位*/
function addComma(val){
var regPointer=/(.*)\.(.*)/;
if (regPointer.test(val)){
var beforePointer=RegExp.$1;
var afterPointer=RegExp.$2;
val=beforePointer.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')+"."+afterPointer;
}else{
val=val.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
}
return val;
}
此函数传入的参数需要时只包含0-9与小数点的数字，这个在输入框输入的时候进行按键判断处理比较好。
一般来说在输入的时候执行 check(val) 与 addComma(val)函数。
在输入框失去焦点时执行 regular(val) 与 addComma(val)函数。
注意千分位数值与原始数值建议使用两个变量保存。
【完整Demo】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>金额输入处理</title>
<script>
/*金额处理校验函数*/
function check(val) {
val = val.replace(/[^\d\.]/g, ''); //去掉非法字符
/^0+([0-9]+)/.test(val) && (val = RegExp.$1); //去零（数字前的零）
/^\..*/.test(val) && (val = "0" + val); //小数点开头补零
/^(.*\..*)\.$/.test(val) && (val = RegExp.$1); //去掉多余的小数点
/^(.*\.\d\d).*$/.test(val) && (val = RegExp.$1); //只保留两位小数
return val;
}
/*金额规格化*/
function regular(val) {
/^(.*)\.$/.test(val) && (val = RegExp.$1); //以点结尾去点
/^(\d)+$/.test(val) && (val = val + ".00"); //整数补.00
/^.*\.[0-9]$/.test(val) && (val = val + "0"); //一位小数补0
/^(.*\.\d\d(\d*[0-9])*)0+$/.test(val) && (val = RegExp.$1); //去掉两位小数后的多余的0
return val;
}
/*金额千分位*/
function addComma(val) {
var regPointer = /(.*)\.(.*)/;
if (regPointer.test(val)) {
var beforePointer = RegExp.$1;
var afterPointer = RegExp.$2;
val = beforePointer.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,') + "." + afterPointer;
} else {
val = val.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
}
return val;
}
function input() {
let val = check(document.getElementById("input").value);
document.getElementById("input").value = val;
document.getElementById("text").innerText = addComma(val);
}
function change() {
let val = regular(document.getElementById("input").value);
document.getElementById("input").value = val;
document.getElementById("text").innerText = addComma(val);
}
</script>
</head>
<body>
<input type="text" id="input" oninput="input()" onchange="change()">
<div id="text"></div>
</body>
</html>
网友评论