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 继承实例分析
Nov 04 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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关联链接常用代码
2012/11/05 PHP
destoon常用的安全设置概述
2014/06/21 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
重定向实现代码
2006/11/20 Javascript
用javascript实现自定义标签
2007/05/08 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
javascript中的隐式调用
2018/02/10 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
Python学生成绩管理系统简洁版
2020/04/05 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python中Django文件上传方法详解
2020/08/05 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
GWT都有什么特性
2016/12/02 面试题
最新销售员个人自荐信
2013/09/21 职场文书
个人实习生的自我评价
2014/02/16 职场文书
企业安全标语
2014/06/07 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
初中信息技术教学计划
2015/01/22 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python