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下查找父节点的简单方法
Aug 13 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
javascript删除数组元素的七个方法示例
Sep 09 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做推送服务端实现ios消息推送
2013/07/01 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
简单解析Django框架中的表单验证
2015/07/17 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
教师的实习鉴定
2013/12/15 职场文书
教师评优事迹材料
2014/01/10 职场文书
万年牢教学反思
2014/02/15 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
周年庆典答谢词
2015/01/20 职场文书
民政工作个人总结
2015/02/28 职场文书
大学生暑期实践报告
2015/07/13 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL