<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>检查输入的内容是否为数字</p>
<!-- 建立文本框输入内容，placeholder=''可以在里面输入提示信息 -->
<input type="text" name="" id="demo1" value="" placeholder="请输入内容" />
<!-- 点击按钮，执行myFunction()函数 -->
<button type="button" onclick="myFunction()">检查</button>
<!-- 输出结果 -->
<p id="demo2" style="color: red;"></p> <script type="text/javascript">
function myFunction(){
var x = document.getElementById('demo1').value;//获取input框内的值,也就是value
var y = document.getElementById('demo2');//获取p标签,方便输出结果
if(x==""||x==" "||isNaN(x)){//isNaN(x):检查X是否不为数字,不是就输出if,否则输入else
y.innerHTML='输入内容不是数字，重新输入！';
}
else{
y.innerHTML='输入正确！';
}
}
/* if(x==""||x==" "||isNaN(x))只能判断空值，一个空格，和非数字，
如果是多个空格或者特殊符号依然会判断错误，所以实际应用当中需要用到正则表达式； */
</script> <p>------------分割线------------</p>
<p>用正则表达式判断输入的内容是否为数字</p>
<!-- 建立文本框输入内容，placeholder=''可以在里面输入提示信息 -->
<input type="text" name="" id="demo3" value="" placeholder="请输入内容" />
<!-- 点击按钮，执行myFunction1()函数 -->
<button type="button" onclick="myFunction1()">检查</button>
<!-- 输出结果 -->
<p id="demo4" style="color: red;"></p> <script type="text/javascript">
function myFunction1(){
var a = document.getElementById('demo3').value;
var b = document.getElementById('demo4');
if(a.replace(/(^\s*)/,"")==""||isNaN(a)){
b.innerHTML='输入内容不是数字，重新输入！';
}
else{
b.innerHTML='输入正确！';
}
}
/* a.replace(/(^\s*)/,"")==""
这里表示以空格开头且有1个或多个空格，就会把值转换为==""空值，从而判断不是数字
^ 表示以某个字符开头
\s 表示空白字符 包括：空格、Tab、换行、回车
* 表示有一个或者多个同类型字符 其他复杂的正则还没研究过，这里只是简单例子
*/
</script>
</body>
</html>