JavaScript 输入框值为1-10之间数字

最新推荐文章于 2024-06-24 23:18:41 发布

DreamTL

最新推荐文章于 2024-06-24 23:18:41 发布

阅读量5.2k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/DreamTL/article/details/70473863

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过JavaScript来判断输入框值为1-10之间的数字，当输入非汉字时，弹出提示信息，当输入1-10之间时，弹出输入内容（以弹框的形式来进行提示）

代码如下：通过 isNaN 函数来判断是否为数字，如果不是数字，返回true，为数字，返回false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function myFunction(){
            //获取元素节点
            var x ;
            x=document.getElementById("num");
//            alert(x.value);
            if(isNaN(x.value)){
                alert("输入内容不是数字");
            }else if(x.value<1|| x.value>10){
                alert("请输入1到10之间的数字");
            }else{
                alert(x.value);
            }
        }
    </script>
</head>
<body>
<p>请输入1到10之间的数字：</p>
<input id="num"/>
<button type="button" οnclick="myFunction()">提交</button>
</body>
</html>

效果图如下：

方式二：当输入错误时，在页面显示，输入错误提示信息

代码如下：通过 innerHTML 写入到HTML中

<body>
<p>请输入1到10之间的数字：</p>
<input id="num"/>
<button type="button" οnclick="onFunction()">提交</button>
<p id="message"></p>
</body>

function onFunction(){
    var x;
    x=document.getElementById("num").value;
    if(x>=1&&x<=10){
        document.getElementById("message").innerHTML="输入正确";
    }else{
        document.getElementById("message").innerHTML="输入错误";
    }
}