美文网首页
表单验证以及数据千分位处理

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

作者: GrowthCoder | 来源:发表于2017-03-27 16:57 被阅读0次

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

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

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

相关文章

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

    最近做的业务中涉及到表单验证以及数据格式化,里面有些写法我认为也是有可借鉴之处的,拿出来分享下,并对代码进行分析。...

  • Angular

    Form 表单 在开始看angularjs如何处理表单前, 我们先想想处理表单时可能遇到的问题 如何数据绑定 验证...

  • ant design 表单验证---自定义校验

    验证函数需要其他表单数据可以通过动态验证传值 参数使用以及返回

  • PHP 上传文件至服务器

    PHP是开发Web应用的首选语言之一,本文将介绍: 用PHP处理HTML表单中的数据 验证表单数据 文件上传处理步...

  • 基于jQuery的表单验证插件

    常见表单验证实例非空长度正则关联验证,等 总结表单验证可公共化部分事件绑定错误提示输出数据处理(如trim,半角转...

  • 验证

    验证 表单请求验证类 必须 使用 表单请求 - FormRequest 类 来处理控制器里的表单验证。 验证类的 ...

  • Python Web框架 Django - 表单验证、路由反向解

    表单验证 逻辑处理,创建表单验证模块里的验证类,并将用户请求的POST对象,传入验证类进行验证,验证后获取验证通过...

  • JS常用正则表达式

    添加千分位符 验证邮箱格式 验证手机号码格式

  • js事件入门(4)

    4.表单事件 表单事件处理主要用来验证表单,可以处理用户在表单上所做的任何操作。 #4.1.onsubmit事件 ...

  • 表单验证

    表单验证:表单验证是一门处理在一个web表单里检查用户提供的信息是否正确的技术,表单验证意味着和用户的交流并引导他...

网友评论

      本文标题:表单验证以及数据千分位处理

      本文链接:https://www.haomeiwen.com/subject/ohrrbttx.html