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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
vue下载二进制流图片操作
Oct 26 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
第十一节 重载 [11]
2006/10/09 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
Python如何读取MySQL数据库表数据
2017/03/11 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Python netmiko模块的使用
2020/02/14 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
PHP面试题附答案
2015/11/28 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers
vue router 动态路由清除方式
2022/05/25 Vue.js