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 相关文章推荐
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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一行代码获取文件后缀名实例分析
2014/11/12 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
理解javascript模块化
2016/03/28 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python字符串替换实例分析
2015/05/11 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
聚美优品的广告词
2014/03/14 职场文书
爱护公共设施的标语
2014/06/24 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
杜甫草堂导游词
2015/02/03 职场文书
环卫个人总结
2015/03/03 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
大学军训口号大全
2015/12/24 职场文书