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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

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