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 相关文章推荐
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 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的十大要点(上)
2009/02/04 PHP
php session应用实例 登录验证
2009/03/16 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
javascript 回调函数详解
2014/11/11 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
python openCV自制绘画板
2020/10/27 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
美国知名生活购物网站:Goop
2017/11/03 全球购物
打架检讨书2000字
2014/02/22 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
初二物理教学反思
2016/02/19 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL