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 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
JS函数重载的解决方案
May 13 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
JS FormData对象使用方法实例详解
Feb 12 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 批量添加多行文本框textarea一行一个
2014/06/03 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python模块WSGI使用详解
2018/02/02 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
详解重置Django migration的常见方式
2019/02/15 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
Python新手学习装饰器
2020/06/04 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
保洁员岗位职责
2015/02/04 职场文书
单位证明范文
2015/06/18 职场文书
《检阅》教学反思
2016/02/22 职场文书