JS判断文本框中输入内容是否为数字_js判断输入的是汉字还是数字-优快云博客

本文链接：https://blog.youkuaiyun.com/biledoudou/article/details/88367403

初学JS，写的第一个例子，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.function() {
            var oTxt=document.querySelector("#txt");
            var oBtn=document.querySelector("#btn");
            oBtn.onclick=function() {
                var num=oTxt.value;
                if(num=='' || num==undefined ||num==null) {
                    alert("请输入QQ号！！！");
                }else if(num.indexOf(" ")>=0) {
                    alert("输入中有空格！！！");
                }else if(isNaN(num)) {
                    alert("请输入纯数字！！！");   
                }else if(num.charAt(0)==0) { 
                    alert("首位不能为0！！！");
                }else if (parseInt(num)!=num) { 
                    alert("输入的数字中不能为小数！！！"); 
                }else if(num<10000 || num>999999999) {
                    alert("输入的数字必须在5位以上、10位以内");
                }else {
                    alert("你输入的QQ号为："+oTxt.value);
                }                                        
            }                                            
        }                                                
    </script>       
</head>
<body>
    请输入QQ号：<input type="text" id="txt">&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="btn" value="判断"><br />
    1、有没有输入<br />
    2、输入的是不是数字<br />
    3、不能有0在前面<br />
    4、不能是小数<br />
    5、输入的数字必须在5位以上、10位以内<br />
</body>
</html>

判断首位是否为0，也可以用正则表示，在这里也说说吧！！
把num.charAt(0)==0换成!(/^[1-9]\d*$/.test(num))也可以：

正则表达式： /^[1-9]\d*$/  ,   注意：/^表示开始，$/表示结束， 第一位不能为0，那就从1开始[1-9],后边是所有数字都可以用\d，最少出现0次，所以用*
test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中有匹配的值返回 true ，否则返回 false

写的第一个js例子，感觉还不错。
在这里插入图片描述

2019年3月10日
自己看书看到了键盘事件，所以自己把这个例子修改了一下，有点击事件改为了键盘事件！！！
上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script>
        window.function() {
            var oTxt=document.getElementById("txt");
            var oLi=document.getElementsByTagName("li");
            var oSpan=document.getElementsByTagName("span")[0];
            oLi[0].style.color="red";
            oTxt.onkeyup=function() {
                var num=oTxt.value;
                if(num=='' || num==undefined ||num==null) {
                    oLi[0].style.color="red";
                    oLi[1].style.color="black";
                    oLi[2].style.color="black";
                    oLi[3].style.color="black";
                    oLi[4].style.color="black";
                }else if(num.indexOf(" ")>=0) {
                    alert("输入中有空格！！！");
                }else if(isNaN(num)) {
                    oLi[0].style.color="black";
                    oLi[1].style.color="red";
                    oLi[2].style.color="black";
                    oLi[3].style.color="black";
                    oLi[4].style.color="black";
                }else if(num.charAt(0)==0) {
                    oLi[0].style.color="black";
                    oLi[1].style.color="black";
                    oLi[2].style.color="red";
                    oLi[3].style.color="black";
                    oLi[4].style.color="black";
                }else if (parseInt(num)!=num) {
                    oLi[0].style.color="black";
                    oLi[1].style.color="black";
                    oLi[2].style.color="black";
                    oLi[3].style.color="red";
                    oLi[4].style.color="black";
                }else if(num<10000 || num>999999999) {
                    oLi[0].style.color="black";
                    oLi[1].style.color="black";
                    oLi[2].style.color="black";
                    oLi[3].style.color="black";
                    oLi[4].style.color="red";
                }else {
                    oLi[0].style.color="black";
                    oLi[1].style.color="black";
                    oLi[2].style.color="black";
                    oLi[3].style.color="black";
                    oLi[4].style.color="black";
                }
                oSpan.innerText=num;
            }
        }
    </script>
</head>
<body>
    请输入QQ号：<input type="text" id="txt">
    <ul li="list">
        <li>有没有输入</li>
        <li>输入的不是数字</li>
        <li>首位不能为0</li>
        <li>不能是小数</li>
        <li>输入的数字必须在5位以上、10位以内</li>
    </ul>
    你的QQ号为:<span style="color:blue"></span>
</body>
</html>

看看运行效果吧！
在这里插入图片描述
总感觉自己的代码还是有点死板！！！
继续加油吧！！！