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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
vue实现登录功能
Dec 31 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
php curl发送请求实例方法
2019/08/01 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python中的zipfile模块使用详解
2015/06/25 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
公司总经理工作职责管理办法
2014/02/28 职场文书
竞聘书模板
2014/03/31 职场文书
市场营销战略计划书
2014/05/06 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
会计岗位职责范本
2015/04/02 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书