专栏首页Devops专栏JavaScript 判断输入的值为数字

JavaScript 判断输入的值为数字

仅供学习,转载请注明出处

第一种方法:isNaN()

使用js自带全局函数isNaN(), isNaN()返回一个Boolean值,如下 :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        ;(function(){
            var sTr = 'hello world';

            alert("sTr=" + isNaN(sTr));  // 字符串输出 true

            var iNum = 1;

            alert("iNum=" + isNaN(iNum));  // 数字输出false

        }())
    </script>
</head>
<body>

</body>
</html>

如果以上sTr为一个空串或是一个空格,isNaN将把c当作数字0来处理,所以检查不严谨。

第二种方法:正则表达式

function checkNum(num){

    var reg=/^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 ,判断正整数用/^[1-9]+[0-9]*]*$/

    if(!reg.test(num)){
        alert("请输入数字");
        return false;
    }else{
        alert("数字输入正确");
        return true;
    }

}

完整测试代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            ;(function(){

                var iInput = document.getElementById('input1');
                var iBtn1 = document.getElementById('btn1');

                iBtn1.onclick = function(){

                    checkNum(input1.value);

                }

                function checkNum(num){

                    var reg=/^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 ,判断正整数用/^[1-9]+[0-9]*]*$/

                    if(!reg.test(num)){
                        alert("请输入数字");
                        return false;
                    }else{
                        alert("数字输入正确");
                        return true;
                    }

                }


            }())
        }
        
    </script>
</head>
<body>
    <input type="text" name="" id="input1">
    <input type="button" name="" value="检查是否为整数" id="btn1">
</body>
</html>

第三种方法: 利用typeof的返回值

验证方法:如果返回的值为Number,则为数字;如果返回值为String或其它,则不是数字。如下所示:

var a=123;

var b='123abc';

typeof(a) //Number

typeof(b) //String

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery属性操作 html() prop()

    使用html()相当于原生javascript的innerHtml,即可以获取元素的之间的html内容,还可以创建新的html元素。

    Devops海洋的渔夫
  • 43. Vue组件案例-评论列表

    好了,现在基本页面已经写好了。但是为了演示父组件与子组件之间的传值以及调用关系,我将上面提交评论的部分抽出来作为一个子组件。

    Devops海洋的渔夫
  • Django 2.1.7 分页 Paginator

    https://docs.djangoproject.com/zh-hans/2.1/topics/pagination/

    Devops海洋的渔夫
  • 开发你不能忽略的问题?JavaScript(JS)

    一、JavaScript基础加强 ? JavaScript是在浏览器内容运行,无需编译、解释执行动态脚本语言,是一种弱类型语言,所有变量使用var定义。 Ja...

    奋斗蒙
  • JavaWeb02-CSS,JS(Java真正的全栈开发)

    ? css&javascript 一.CSS 1.CSS介绍 CSS 指层叠样式表 (Cascading Style Sheets),用来定义网页的显示效果。...

    奋斗蒙
  • zephyr笔记 2.4.3 Alerts

    我正在学习 Zephyr,一个很可能会用到很多物联网设备上的操作系统,如果你也感兴趣,可点此查看帖子zephyr学习笔记汇总。

    twowinter
  • javascript 模拟按键点击提交

    上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta...

    纯粹是糖
  • 撩一下一些必要的js工具函数

    不管是什么项目,总有一些基本的功能函数默默的躺在你的工具库中,为你遮挡bug,提升性能,一起来复习下! debounce 当监听一些scroll,resize事...

    IMWeb前端团队
  • Jquery中的done() fail() then() $when()到底是什么

    有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。

    Daotin
  • 性能优化-jvm的内存模型

    jvm的内存模型在1.7和1.8有较大的区别,虽然本套课程是以1.8为例进行讲解,但是我们 也是需要对1.7的内存模型有所了解,所以接下里,我们将先学习1....

    cwl_java

扫码关注云+社区

领取腾讯云代金券