JavaScript如何判断input数据类型
更新时间：2020年02月06日 11:26:52 作者：西红柿里没有番茄
这篇文章主要介绍了JavaScript如何判断input数据类型,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
这篇文章主要介绍了JavaScript如何判断input数据类型,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
在HTML中接收用户输入信息一般都会用到<input/>。我今天本来想实现一个功能：由用户在input中输入自己的年龄，然后根据不同的年龄段弹出不同的信息，为了让程序更加严谨，我得判断从input中获取到的值必须是数字（这个问题其实可以直接限制input的输入内容为数字，在这里我想要实现通过javascript判断input里的值是否是数字）。
试过很多种方法发现都不行，因为不管用户在input中输入了什么类型的数据，我通过javaScript获取到这个值后都会变成字符，所以我们通常用来判断数据类型的几个方法（Number(a)、typeof、instanceof）在这里都是没有用的，用这几个方法进行判断得到的结果一定是false。
试了很多种方法后我发现用正则表达式进行判断很方便，在这里了记录一下：
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script defer>
function test(num) {
// 判断一串字符是不是全部是数字
var rex = /^[0-9]+$/;//正则表达式
var flag = rex.test(num);//通过表达式进行匹配
if (flag) {
alert("数据类型合法");
} else {
alert("数据类型不合法");
}
}
</script>
</head>
<body>
<input type="text" id="in">
<br>
<button onclick="test(document.getElementById('in').value)">进行数据判断</button>
</body>
</html>
先获取input中的值，再用正则表达式进行判断返回一个布尔值
可以看效果是实现了的：
额外啰嗦一点
如果我们需要将输入框中的字符转换成数字运算也可以使用正则去实现，只要在原来的代码中加上下面红色背景那段代码就可以将字符转换成数字了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script defer>
function test(num) {
// 判断一串字符是不是全部是数字
var rex = /^[0-9]+$/;//正则表达式
var flag = rex.test(num);//通过表达式进r行匹配
var fin = num.match(rex);
if (flag) {
alert(fin+"：数据类型合法");
} else {
alert("数据类型不合法");
}
}
</script>
</head>
<body>
<input type="text" id="in">
<br>
<button onclick="test(document.getElementById('in').value)">进行数据判断</button>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了微信小程序签到功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要汇总了JavaScript 常见的继承方式，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-09-09
本篇文章主要介绍了webpack打包单页面如何引用的js，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了js版实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
我们已经知道，null 没有任何的属性值，并且无法获取其实体（existence）值。所以 null.property 返回的是错误（error）而不是 undefined 。2008-08-08
驱动事件的addEvent.js代码...2007-03-03
这篇文章主要介绍了js简单实现Select互换数据的方法,涉及javascript动态操作select中option节点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了javascript实现前端成语点击验证优化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
MSN消息提示类...2006-09-09
这篇文章主要介绍了微信小程序返回上一级页面的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
最新评论