JavaScript如何判断input数据类型
这篇文章主要介绍了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中的值，再用正则表达式进行判断返回一个布尔值
可以看效果是实现了的：
额外啰嗦一点
如果我们需要将输入框中的字符转换成数字运算也可以使用正则去实现，只要在原来的代码中加上下面红色背景那段代码就可以将字符转换成数字了
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc
-
vue.js input框之间赋值方法
如下所示: demo.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index Page</title> </head> <body> <form action="" id="demo"> <input type="text" va
-
vuejs 动态添加input框的实例讲解
实例如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="front" val
-
js限制input只能输入有效的数字(第一个不能是小数点)
第一种方法:通过字符搜索判断等实现,适合功能增强 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jq.js"></script> </head> <body> <i
-
![原生javascript自定义input[type=radio]效果示例](/assets/blank.gif)
原生javascript自定义input[type=radio]效果示例
本文实例讲述了原生javascript自定义input[type=radio]效果.分享给大家供大家参考,具体如下: 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"
-
jQuery/JS监听input输入框值变化实例
input事件: onchange: 1.要在 input 失去焦点的时候才会触发: 2.在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发: 3.onchange event 所有主要浏览器都支持: 4.onchange 属性可以使用于:<input>, <select>, 和 <textarea>. <script> function change(){ var x=document.getElementById("pa
-
js实现input密码框显示/隐藏功能
JavaScript实现input密码框显示/隐藏的功能,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display:
-
js自定义input文件上传样式
文件上传是我们经常会用到的功能,但是原生的input样式太丑了,能不能自定义一个input文件上传样式呢? 我这里写了两种方法,form表单提交跟ajax异步提交都没有问题,自动上传或者点击上传按钮上传也都没问题 先看效果: 代码贴出来: 方法1 <!-- 方法1: div : 设置宽高.overflow:hidden;超出的部分被隐藏 input : 设置层级z-index = 1;设置透明度opacity:0;设置相对定位position:relative;使两个元素重叠 i : 设置层级z
-
JavaScript如何判断input数据类型
这篇文章主要介绍了JavaScript如何判断input数据类型,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在HTML中接收用户输入信息一般都会用到<input/>.我今天本来想实现一个功能:由用户在input中输入自己的年龄,然后根据不同的年龄段弹出不同的信息,为了让程序更加严谨,我得判断从input中获取到的值必须是数字(这个问题其实可以直接限制input的输入内容为数字,在这里我想要实现通过javascript判断input里的值是
-
JavaScript中判断数据类型的方法总结
typeof typeof用的比较多的时候,是判断某个全局变量在不在,假如某个页面定义了一个全局变量.假如你做如下判断: //haorooms是全局变量 if(haorooms!=undefined){ }//js会报错,说"Uncaught ReferenceError: haorooms is not defined" 解决的方法是我们如下写: if(typeof haorooms!=undefined){ } 用了typeof之后,就不会报错了!这是typeof的应用之一! 此外
-
JavaScript知识点总结(六)之JavaScript判断变量数据类型
最近做了一个项目,其中有关于js判断数据类型的处理,在网上搜了相关资料,并且亲自测试了各种数据类型的判断,绝对安全.下面小编把具体内容总结分享给大家,大家参考下! 一.JS中的数据类型 1.数值型(Number):包括整数.浮点数. 2.布尔型(Boolean) 3.字符串型(String) 4.对象(Object) 5.数组(Array) 6.空值(Null) 7.未定义(Undefined) 二.判断一个变量的数据类型 1.数值型(number) 比较常用的判断方法是: function i
-
javascript动态判断html元素并执行不同的操作
在javascript中为了针对不同的元素执行不同的操作,需要在javascript中对触发事件的元素进行判断,然后执行不同的操作. 例子: html 复制代码 代码如下: <input type='button' name＝'updatemetal' value='修改' onclick='getmetalid(this)'> <input type='button' name＝'deletemetal' value='删除' onclick='getmetalid(this)'>
-
JavaScript简单判断复选框是否选中及取出值的方法
本文实例讲述了JavaScript简单判断复选框是否选中及取出值的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript 获取复选框的值,有朋友在刚开始利用表单提交数据的时候,一般都会遇到表单中有一个特别的元素--复选框,判断它是否选中以及获取它的值 ,好像跟其它的表单元素有点不一样,本代码将为您展示如何获取复选框的值并判断是否被选中. 运行效果如下图所示: 具体代码如下: <title>JavaScript 获取复选框的值</title> <script>
-
javascript简单判断输入内容是否合法的方法
本文实例讲述了javascript简单判断输入内容是否合法的方法.分享给大家供大家参考,具体如下: 关于检测用户输入的内容是否有非法的字符检测实现思路 1.定义合法的字符串(源字符串) 2.获取用户输入的内容 3.循环的取出用户输入的每一个字符,去源字符串中查找 1).查找到了,返回字符串查找的位置 2).没有找到返回-1,我们正好利用-1检测用户输入的内容是否合法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//
-
JavaScript常用判断写法大全(推荐)
js验证表单大全,用JS控制表单提交,具体内容如下所示: 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符!"); document.a.b.focus(); return false; } } </script> <form name=a onsubmit="return test()"> <t
-
详解JavaScript类型判断的四种方法
JavaScript有八种内置类型,除对象外,其他统称为"基本类型". 空值(null) 未定义(undefined) 布尔值(boolean) 数字(number) 字符串(string) 对象 (object) 符号(symbol, ES6中新增) 大整数(BigInt, ES2020 引入) Symbol: 是ES6中引入的一种原始数据类型,表示独一无二的值. BigInt:是 ES2020 引入的一种新的数据类型,用来解决 JavaScript中数字只能到 53 个二进制位(J
-
JavaScript的八种数据类型
目录 一.前言 二.动态数据类型 2.1 字符串string 2.2 数值number 2.3 布尔boolean 2.4 null和undefined 2.5 symbol 2.6 对象object 三.基本数据类型与引用数据类型区别 3.1 声明变量时不同的内存分配 3.2 正是因为内存分配不同,在复制变量时结果也不一样 3.3 参数传递不同 一.前言 在ES5的时候,我们认知的数据类型确实是 6种:Number.String.Boolean.undefined.object.Null ES
-
JavaScript基础语法与数据类型介绍
目录 一.JavaScript语法 1.区分大小写 2.标识符 3.注释 4.变量 二.JavaScript的数据类型 1.Undefined类型 2.Null类型 3.Boolean类型 4.Number 5.String类型 6.Object类型 三.typeof操作符 一.JavaScript语法 1.区分大小写 ECMAScript中的一切,包括变量.函数名和操作符都是区分大小写的.例如:text和Text表示两种不同的变量. 2.标识符 所谓标识符,就是指变量.函数.属性的名字,或者函