• HTML:JavaScript判断从input中获取的数据的类型


      在HTML中接收用户输入信息一般都会用到<input/>。我今天本来想实现一个功能:由用户在input中输入自己的年龄,然后根据不同的年龄段弹出不同的信息,为了让程序更加严谨,我得判断从input中获取到的值必须是数字(这个问题其实可以直接限制input的输入内容为数字,在这里我想要实现通过javascript判断input里的值是否是数字)。  

      试过很多种方法发现都不行,因为不管用户在input中输入了什么类型的数据,我通过javaScript获取到这个值后都会变成字符,所以我们通常用来判断数据类型的几个方法(Number(a)、typeof、instanceof)在这里都是没有用的,用这几个方法进行判断得到的结果一定是false。

      试了很多种方法后我发现用正则表达式进行判断很方便,在这里了记录一下:

    源代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script defer>
    
            function test(num) {
    //            判断一串字符是不是全部是数字
                var rex = /^[0-9]+$/;//正则表达式
                var flag = rex.test(num);//通过表达式进行匹配
    
                if (flag) {
                    alert("数据类型合法");
                } else {
                    alert("数据类型不合法");
                }
    
            }
    
        </script>
    
    </head>
    <body>
    
    <input type="text" id="in">
    <br>
    <button onclick="test(document.getElementById('in').value)">进行数据判断</button>
    
    </body>
    </html>
    

    先获取input中的值,再用正则表达式进行判断返回一个布尔值 

    可以看效果是实现了的:

    额外啰嗦一点

    如果我们需要将输入框中的字符转换成数字运算也可以使用正则去实现,只要在原来的代码中加上下面红色背景那段代码就可以将字符转换成数字了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script defer>
    
            function test(num) {
    //            判断一串字符是不是全部是数字
                var rex = /^[0-9]+$/;//正则表达式
                var flag = rex.test(num);//通过表达式进r行匹配
                var fin = num.match(rex);
                if (flag) {
                    alert(fin+":数据类型合法");
                } else {
                    alert("数据类型不合法");
                }
    
            }
    
        </script>
    
    </head>
    <body>
    
    <input type="text" id="in">
    <br>
    <button onclick="test(document.getElementById('in').value)">进行数据判断</button>
    
    </body>
    </html>
    
  • 相关阅读:
    MEF程序设计指南一:在应用程序中宿主MEF
    Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)
    【Silverlight】Bing Maps开发应用与技巧六:使用样式美化图钉(Pushpin)控件的ToolTip外观
    线程的两种类型
    几种VC++数据库开发技术的比较
    Never use AfxEndThread! 一个非常好的例子
    我的 Visual C++ 6.0学习网站
    DB2 基础: 日期和时间的使用
    Boost::Regex 使用方法 (英文)
    vc访问数据库 (并弹出数据源浏览窗口与用户交互)
  • 原文地址:https://www.cnblogs.com/lyd447113735/p/8999924.html
Copyright © 2020-2023  润新知