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

最新推荐文章于 2025-01-11 11:00:00 发布

转载最新推荐文章于 2025-01-11 11:00:00 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/muou2125/p/9870981.html

文章标签：

#前端 #javascript #ViewUI

本文介绍了一种使用jQuery进行用户输入验证的方法，包括手机号码和价格的格式校验。通过正则表达式去除非法字符，确保输入的有效性和一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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