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 相关文章推荐
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 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 防止单引号,双引号在接受页面转义
2008/07/10 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
php中Ctype函数用法详解
2014/12/09 PHP
PHP SOCKET编程详解
2015/05/22 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
vue中的计算属性和侦听属性
2020/11/06 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
Python SQL查询并生成json文件操作示例
2018/08/17 Python
python样条插值的实现代码
2018/12/17 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Django日志及中间件模块应用案例
2020/09/10 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
法制宣传实施方案
2014/03/13 职场文书
学生鉴定评语大全
2014/05/05 职场文书
效能风暴心得体会
2014/09/04 职场文书
五年级学生期末评语
2014/12/26 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
python实现三次密码验证的示例
2021/04/29 Python