支持2位小数文本框，对比输入前后校验非字符

最新推荐文章于 2024-09-20 11:38:47 发布

wanghan1977

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量131

点赞数

分类专栏： javascript 文章标签： javascript html jquery

本文链接：https://blog.csdn.net/wanghan1977/article/details/111979047

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文通过JavaScript实现一个支持最多2位小数的文本框，具备自动补0、超位数校验、非数字输入检测等功能。当输入超过2位小数或输入非数字时，系统会进行相应报错并恢复原状。

摘要由CSDN通过智能技术生成

先看代码

<html>
	<head>
		<meta charset="UTF-8">
		<title>支持两位有效小数的文本框</title>
		<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
	</head>
	<body>
		数字框：<input datatype="numeric" type="text" maxlength="15" value="0.00" onblur="formatSelf(this)">
	</body>
	<script type="text/javascript">
		$(document).ready(function () {
			// 记录控件里的原值
			$("body").on('keydown', 'input', function(e){
				var $this = $(this);
				var currentValue = $this.val();
				// 只记住符合格式的字符，防止长按
				if ($this.attr("datatype") == "numeric" && !isNull(currentValue) && isDouble2(currentValue)){
				    $this.data('val', $(this).val());
				}
			}).on('keyup',"input",function(){
				// 在结束输入时校验
				var $this = $(this);
	        // 之前的值
	        var prev = $this.data('val');
	        //当前值内容
	        var currentValue = $this.val();
	        if ($this.attr("datatype") == "numeric" && !isNull(currentValue) && !isDouble2(currentValue)){
	      		$this.val(prev).trigger('change');
	      		alert("请输入数值型数据,最多两位小数！");
	      		return;
	        }
	      });
		});
		//校验2位小数
		function isDouble2(str) {
    	if(parseFloat(str) != 0 && !Number(str)){
    		return false;
    	}
	    var regu = /^(-?\d+)(.?)(\d{1,2})?$/;
	    var re = new RegExp(regu);
	    return re.test(str);
    }
    // 校验非空
    function isNull(str) {
        if (str == "" || str == null)
            return true;
        var regu = "^[ ]+$";
        var re = new RegExp(regu);
        return re.test(str);
    }
    function getMoneyFormat(value) {
    	if (!value) {
    		return "0.00";
    	}
    	var value = parseInt(parseFloat(value) * 100) / 100;
    	var xsd = value.toString().split(".");
    	if (xsd.length == 1) {
    		value = value.toString() + ".00";
    		return value;
    	}
    	if (xsd.length > 1) {
    		if (xsd[1].length < 2) {
    			value = value.toString() + "0";
    		}
    		return value;
    	}
    }
    // 格式化自己
    function formatSelf(me){
    	me.value = getMoneyFormat(me.value);
    }
	</script>
</html>