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学习笔记4 Eval函数
Jan 11 Javascript
javascript 面向对象 function类
May 13 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
原生js调用json方法总结
Feb 22 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
js实现简单模态框实例
Nov 16 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 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&amp;java(二)
2006/10/09 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
yy结婚证婚词
2014/01/10 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
建筑工地质量标语
2014/06/12 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js