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 相关文章推荐
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
Vue如何清空对象
Mar 03 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
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
vue实现防抖的实例代码
2021/01/11 Vue.js
Python 忽略warning的输出方法
2018/10/18 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
set在python里的含义和用法
2019/06/24 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
现金出纳岗位职责
2014/03/15 职场文书
校本研修个人总结
2015/02/28 职场文书
庆七一主持词
2015/06/29 职场文书
防震减灾主题班会
2015/08/14 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏
我的收音机情缘
2022/04/05 无线电