最近做的业务中涉及到表单验证以及数据格式化,里面有些写法我认为也是有可借鉴之处的,拿出来分享下,并对代码进行分析。如果其中有不足之处,请大神多多指教,或者有更好的写法,也希望各路大神分享出来。
//html
<input type="text" onkeyup="checkNumber(this)" />
<input type="text" onkeyup="checkNumber(this)" />
//js
<script type="text/javascript">
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
inputs[i].onblur = function(e) {
this.value = setNumber(this.value);
};
inputs[i].onfocus =function(e) {
// 此处对逗号用空字符串替代,起到还原数据的效果
// 避免因递归校验数据时引起的bug 同时便于对之前输入的数据进行修改
this.value = this.value.replace(/\,/g,'');
// 输入框获取焦点时,有选中数据的效果
this.select();
}
}
/**
* 实时校验规则:
* 只允许输入数字、小数点、至多输入两位小数
* 递归方法对数据进行校验
* 避免使用event的键值方法校验
**/
function checkNumber(obj) {
var regx = /^-?[0-9]*\.?\d{0,2}$/;
if (regx.test(obj.value)) {
} else {
// 用递归的方法 对数据进行校验
obj.value = obj.value.substr(0, obj.value.length - 1);
checkNumber(obj);
}
}
/**
* 数据格式化操作:
* 用正则的方法对数据进行千分位处理并且保留两位小数
*
**/
function setNumber(val) {
var num = val.toString().split('.');
var intPart = num[0];
var floatPart = num[1];
var regx = /(\d+)(\d{3})/; //组合匹配
var result;
// 使用正则对整数部分进行千分位处理 用逗号进行分割
while(regx.test(intPart)) {
intPart = intPart.replace(regx, '$1,$2');
}
// 保留两位小数 如果原数据为整数则添加‘.00’
if(!/\./.test(val)) {
val == '' ? result = val : result = intPart + '.00';
}else {
floatPart = '.' + floatPart.slice(0,2);
result = intPart + floatPart;
}
return result;
}
</script>
觉得好的话请点赞、分享哦。