表单验证以及数据千分位处理

2017-03-27  本文已影响0人  GrowthCoder

最近做的业务中涉及到表单验证以及数据格式化,里面有些写法我认为也是有可借鉴之处的,拿出来分享下,并对代码进行分析。如果其中有不足之处,请大神多多指教,或者有更好的写法,也希望各路大神分享出来。

//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>

觉得好的话请点赞、分享哦。

上一篇 下一篇

猜你喜欢

热点阅读