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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
如何使用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/01/13 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
php生成QRcode实例
2014/09/22 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
javascript轮播图算法
2016/10/21 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
Bootstrap Table使用整理(二)
2017/06/09 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
python自动格式化json文件的方法
2015/03/11 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python距离测量的方法
2018/03/06 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python中如何设置代码自动提示
2020/07/15 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
促销活动总结范文
2014/04/30 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
会计工作检讨书
2015/02/19 职场文书
2015年采购员工作总结
2015/04/27 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
工作一年自我鉴定
2019/06/20 职场文书