在页面填写部分信息的时候(如金额等),我们有时候需要校验他的有效性,比如只能输入整数,小数(指定位数),负数等等,下面给出一个自己写的JS,用来控制小数,各位看需求使用即可。下面的方法配合使用可以达到完美解决一个文本域的控制问题。
限制文本域只能输入固定位的小数
/**
* 控制文本域只能输入几位固定的位数
* @param id 文本域的ID
* @param num 控制几位数(小数位)
* add by dyp 20190429
*/
function decimalDigit(id,num){
var zzDigit="";
for(i=0;i<num;i++){
zzDigit=zzDigit+"\\d";
}
var temp=new RegExp("^(\\-)*(\\d+)\\.("+zzDigit+").*$");//只能输入三位小数 $1表示:第一个括号里 $3 第三个括号里边,一个\d代表一个位数
$("#"+id).bind("keyup",function(){
this.value = this.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
this.value = this.value.replace(/^\./g,""); //验证第一个字符是数字
this.value = this.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
this.value = this.value.replace(temp,'$1$2.$3'); //只能输入三位小数 $1表示:第一个括号里 $3 第三个括号里边,一个\d代表一个位数
});
$("#"+id).bind("afterpaste",function(){
this.value = this.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
this.value = this.value.replace(/^\./g,""); //验证第一个字符是数字
this.value = this.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
this.value = this.value.replace(temp,'$1$2.$3'); //只能输入三位小数 $1表示:第一个括号里 $3 第三个括号里边,一个\d代表一个位数
});
}
第一种方法为:
// 1.格式化出标准的2位小数(其他位数的自己调整即可)
// 格式化出标准的2位小数
function formatNum (num){
var numMatch = String(num).match(/\d*(\.\d{0,2})?/);
return (numMatch[0] += numMatch[1] ? '00'.substr(0, 3 - numMatch[1].length) : '.00');
}
2.对应文本域自动补齐位数
//发票总金额格式化为2位数
function invoiceTotalMoneyBlur(){
$("#invoiceTotalMoney").blur(function(){
var temp=$(this).val();
$(this).val(formatNum(temp));
});
},
3.总体方法直接在页面加载时候加载进去即可,如下:
$(function(){
decimalDigit("invoiceTotalMoney",2);//发票总金额只能输入两位数限制
invoiceTotalMoneyBlur();//发票总金额格式化为2位数 (写得不够两位数了自动补齐)
});
第二种方法为:
1.格式化出标准的N位小数
/**
*小数位不齐的补全操作
*number 目标数值
*bitNum 需要补齐的位数
**/
function changeDecimalBuZero(number, bitNum) {
var f_x = parseFloat(number);
if (isNaN(f_x)) {
return 0;
}
var s_x = number.toString();
var pos_decimal = s_x.indexOf('.');
if (pos_decimal < 0) {
pos_decimal = s_x.length;
s_x += '.';
}
while (s_x.length <= pos_decimal + bitNum) {
s_x += '0';
}
return s_x;
}
2.使用方法如下:
<input id="voiceLandingMonthlyRent" name="voiceLandingMonthlyRent" type="text" maxlength="30" class="input-small required" onclick="decimalDigit('voiceLandingMonthlyRent',4);" onblur="this.value=changeDecimalBuZero(this.value,4)"/>