JavaScript如何判断input数据类型


Posted in Javascript onFebruary 06, 2020

这篇文章主要介绍了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中的值,再用正则表达式进行判断返回一个布尔值

可以看效果是实现了的:

JavaScript如何判断input数据类型

额外??乱坏?/p>

如果我们需要将输入框中的字符转换成数字运算也可以使用正则去实现,只要在原来的代码中加上下面红色背景那段代码就可以将字符转换成数字了

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript数组的使用
Mar 28 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 #jQuery
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 #Javascript
JS实现盒子拖拽效果
Feb 06 #Javascript
JavaScript实现拖拽盒子效果
Feb 06 #Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 #Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 #Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 #Javascript
You might like
一段php加密解密的代码
2007/07/16 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
twig模板常用语句实例小结
2016/02/04 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
对于Python的框架中一些会话程序的管理
2015/04/20 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python递归函数定义与用法示例
2017/06/02 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
优秀老员工获奖感言
2014/02/15 职场文书
工程采购员岗位职责
2014/03/09 职场文书
幸福家庭标语
2014/06/27 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
公司授权委托书范本
2014/09/18 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python