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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,715评论 25 709
  • HTML表单 在HTML中,表单是 ... 之间元素的集合,它们允许访问者输入文本、选择选项、操作对象等等,然后将...
    兰山小亭阅读 8,695评论 2 14
  • 我总结了二十七点, 其一 在当今小说泛滥的年代,越来越多的小说慢慢都忽略了创作技巧,盲目地追求快感、发泄、滥竽充数...
    四季的毛裤阅读 14,527评论 30 197
  • [cp]#巧克力色微凉青春# 时光的歌在耳边回旋 待一切即将尘封落定时 一阵风,又吹皱了一池春水 筱唯,叙阳,温明...
    rightway阅读 1,397评论 0 1
  • 受教是一种美德。在分析阅读的前两个阶段的技巧中,需要精通文法与逻辑,在第三个阶段的技巧中,就要靠修辞的艺术了。读完...
    lylinxiao阅读 897评论 0 0