前端用户输入校验--基于JQ 

<!DOCTYPE html>
<html>
<head>
    <title>用户输入校验</title>
</head>
<body>
    <input type="text" class="check-phone" maxlength="11" placeholder="请输入您的手机号码">
    <input type="text" class="check-price" placeholder="请输入价格">

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 检测手机
            $(".check-phone").keyup(function(){
                let tVal = $(this).val();
                let nVal = tVal.replace(/[^\d]/g, "");
                $(this).val(nVal);
            })

            // 检测价格
            $(".check-price").keyup(function(){
                let tVal = $(this).val();
                let nVal;

                //先把非数字的都替换掉，除了数字和.
                nVal = tVal.replace(/[^\d.]/g, "");
                //必须保证第一个为数字而不是.
                nVal = nVal.replace(/^\./g, "");
                //保证只有出现一个.而没有多个.
                nVal = nVal.replace(/\.{2,}/g, "");
                //保证.只出现一次，而不能出现两次以上
                nVal = nVal.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                $(this).val(nVal);
            })
        })
    </script>
</body>
</html>

 

posted @ 2018-10-29 15:39  青芒灬  阅读(619)  评论(0)  编辑  收藏  举报