正则表达式 - 验证只可输入数字和最多保留两位小数（坑）

2022年1月3日 109次阅读 来源: Hsu yiqi

今天温习正则表达式的时候发现一件神奇的事情…

*前言：在浏览器验证正则字符时，如果输入的是数字带小数点后面不再输入数字，那么浏览器会自动截取掉小数点，即：输入”1.”，浏览器会处理成”1″

唔…因此当我为求方便直接在浏览器中输出表达式时就踩坑了 = =

首先我先写了一个验证最多可保留两位小数的正则：
var reg = /^\d+(.\d{1,2})?$/;
\d：0-9的数字
^\d：以0-9数字开头的表达式
^\d+：以一至多个0-9数字开头的表达式
( )：括号里是一个整体
(.\d{1,2})：. 小数点 、d{1,2} 一至两位数字
(.\d{1,2})?：小数（小数点 + 一至两位小数）限制出现零到一次
(.\d{1,2})?$：若存在小数点，则以小数点后的一至两位小数结尾

在页面中写一个输入框和点击按钮，测试校验是否成功：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="test" >
    <button onclick="review()" id="btn">onclick</button>

    <script>
        var input = document.getElementById('test');
        var reg = /^\d+(.\d{1,2})?$/;

        function review(){ 
            console.log(input.value)
            console.log(reg.test(input.value))
        }
    </script>

</body>
</html>

浏览器F12打开控制台查看效果：
《正则表达式 - 验证只可输入数字和最多保留两位小数（坑）》
可以看到输入框输入1.后正常检验是false，然而如果在浏览器中输入校验规则和字符串则不然：
《正则表达式 - 验证只可输入数字和最多保留两位小数（坑）》
如果输入个带小数点的数字，后面又不再输入数字时，浏览器会自动忽略掉小数点，因而检验”1.”类似的格式相当于校验“1”，结果自然是true。

仅记录为主，若有什么错误还望包涵指出。

    原文作者：Hsu yiqi
    原文地址: https://blog.csdn.net/weixin_44791115/article/details/106473098
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞