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 相关文章推荐
js 事件小结 表格区别
Aug 13 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
PHP中Array相关函数简介
2016/07/03 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
python实现爬虫下载美女图片
2015/07/14 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
为什么相对PHP黑python的更少
2020/06/21 Python
django form和field具体方法和属性说明
2020/07/09 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
Python的collections模块真的很好用
2021/03/01 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
捷克玩具商店:Bambule
2019/02/23 全球购物
2015年人事科工作总结
2015/04/28 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
Mysql事务索引知识汇总
2022/03/17 MySQL