前端用户输入校验--基于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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步