一、代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery实时校验输入框：整数、浮点数</title>
    <style>
    </style>
</head>
<body>
<!-- 引入jquery -->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<div class="content">
    数量：<input class="check_number" type="text" name="number"/><br/>
    金额：<input class="check_float" type="text" name="reward"/>
</div>
</body>
<script>
    //整数监听：不能小于1
    $('.content').delegate('input.check_number', 'propertychange input', function(e) {
     
     
        let totalNumber = $(this).val();
        if (totalNumber) {
     
     
            let re = /^[0-9]+$/ ;
            if (re.test(totalNumber)){
     
       //是正整数
                totalNumber *= 1; //string转为int
                if (totalNumber == 0) {
     
      //如果是0，则设置为1
                    $(this).val(1);
                } else {
     
     
                    $(this).val(totalNumber);
                }
            } else {
     
       //不是正整数，设置为空
                $(this).val('');
            }
        }
    });

    //浮点数监听：最多保留两位小数，不能小于0.01
    $('.content').delegate('input.check_float', 'propertychange input', function(e) {
     
     
        let value = $(this).val();
        if (value == "00") {
     
      //处理 00开头 特殊情况
            value = 0;
        }
        if (isNaN(value)) {
     
     
            $(this).val('');
        } else {
     
     
            let indexPoint = String(value).indexOf(".") + 1;    //获取小数点的位置
            let length = String(value).length;
            if ((indexPoint != 0) && ((length-indexPoint) > 2)) {
     
      //超过2位小数，则只保留2位小数
                $(this).val(parseFloat(value).toFixed(2));
            } else {
     
     
                $(this).val(value);
            }
        }
    });
</script>
</html>

二、效果图

在这里插入图片描述

三、其他

各位请根据自己的需求调整代码

jQuery实时校验输入框：整数、浮点数

一、代码

二、 效果图

三、其他

猜你喜欢

二、效果图