JS判断文本框中输入内容是否为数字
初学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"> <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>
看看运行效果吧！
总感觉自己的代码还是有点死板！！！
继续加油吧！！！