当前位置: 首页 > news >正文

javascript:判断输入值是数字还是字母

1 代码示例

要判断输入值是数字还是字母,我们可以通过JavaScript获取输入框的值,然后使用isNaN函数来检查输入值是否为数字。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>window.onload = function() {const { myForm } = document.forms;if (myForm) {myForm.addEventListener('submit', (e) => {e.preventDefault();const x = myForm.age.value;if (isNaN(x)) {alert("必须输入数字");}});}};</script></head><body><form name="myForm">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

以上代码中我们通过JavaScript代码来获取表单,并检查age字段中是否输入了数字。

2 代码讲解

2.1 获取表单元素

const { myForm } = document.forms;

通过document.forms获取表单,并使用解构赋值的方式获取我们需要的myForm表单。

2.2 添加提交事件监听器

myForm.addEventListener('submit', (e) => {e.preventDefault();

使用addEventListener方法监听表单的submit事件,并在事件触发时执行回调函数。回调函数中,首先调用e.preventDefault()来阻止表单的默认提交行为。

2.3 获取输入框的值

const x = myForm.age.value;

从表单中获取age输入框的值。

2.4 检查输入值是否为数字

if (isNaN(x)) {alert("必须输入数字");
}

使用isNaN函数检查输入值是否为数字。如果isNaN返回true,说明输入的不是数字,此时弹出警告框提示用户“必须输入数字”。

相关文章:

javascript:判断输入值是数字还是字母

1 代码示例 要判断输入值是数字还是字母&#xff0c;我们可以通过JavaScript获取输入框的值&#xff0c;然后使用isNaN函数来检查输入值是否为数字。 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><s…...

Java-排序算法-复盘知识点

刷了24道简单排序题&#xff0c;18道中等排序题之后&#xff0c;给排序算法来个简单的复盘&#xff08;从明天开始刷动态规划咯&#xff09; 1.对于找多数元素&#xff08;出现次数超过一半的元素&#xff09;可以使用摩尔投票法。 2.HashSet的add方法非常实用&#xff1a;如…...

HarmonyOS 原生智能之语音识别实战

HarmonyOS 原生智能之语音识别实战 背景 公司很多业务场景使用到了语音识别功能&#xff0c;当时我们的语音团队自研了语音识别模型&#xff0c;方案是云端模型加端侧SDK交互&#xff0c;端侧负责做语音采集、VAD、opus编码&#xff0c;实时传输给云端&#xff0c;云端识别后…...

基于Gromacs的蛋白质与小分子配体相互作用模拟教程

在生命科学的广阔领域中&#xff0c;蛋白质与小分子配体之间的相互作用扮演着至关重要的角色。这些相互作用不仅影响着生物体内的各种生命活动&#xff0c;如信号传导、代谢调控和药物作用等&#xff0c;同时也是药物设计和开发的核心内容。因此&#xff0c;深入理解并模拟这些…...

Ubuntu下python3.12安装, 分布式 LLM 推理 exo 安装调试过程, 运行自己的 AI 集群

创作不易 只因热爱!! 热衷分享&#xff0c;一起成长! “你的鼓励就是我努力付出的动力” —调试有点废,文章有点长,希望大家用心看完,肯定能学废,感谢. 1. Ubuntu下python3.12安装 1.1 导入 Python 的稳定版 PPA,不用编译 sudo add-apt-repository ppa:deadsnakes/ppa sudo…...

pytest-bdd 行为驱动自动化测试

引言 pytest-bdd 是一个专为Python设计的行为驱动开发&#xff08;BDD&#xff09;测试框架&#xff0c;它允许开发人员使用自然语言&#xff08;如Gherkin&#xff09;来编写测试用例&#xff0c;从而使测试用例更易于理解和维护。 安装 通过pip安装 pip install pytest-b…...

PostgreSQL11 | 触发器

本文章代码已在pgsql11.22版本上运行且通过&#xff0c;展示页由pgAdmin8.4版本提供 上一篇总结了原著的第十章有关pgsql的视图的用法&#xff0c;本篇将总结pgsql的触发器的用法。 触发器 使用触发器可以自动化完成一些在插入数据或修改数据时&#xff0c;某些需要同期同步的…...

cesium canvas广告牌

在有些业务中&#xff0c;对场景中的广告牌样式要求比较高&#xff0c;需要动态显示一些数据&#xff0c;这个时候&#xff0c;我们可以通过将复杂背景样式制作成图片&#xff0c;通过canvas绘制图片和动态数据&#xff0c;从而达到比较好的显示效果。 1 CanvasMarker 类封装 …...

使用Floyd算法求解两点间最短距离

Floyd算法 Floyd算法又称为Floyd-Warshell算法&#xff0c;其实Warshell算法是离散数学中求传递闭包的算法&#xff0c;两者的思想是一致的。Floyd算法是求解多源最短路时通常选用的算法&#xff0c;经过一次算法即可求出任意两点之间的最短距离&#xff0c;并且可以处理有负权…...

linux“how_paras.sh“ E212: 无法打开并写入文件

经过一番测试和查找&#xff0c; [6localhost bin]$ find / -name "hello.sh" 2>/dev/null /home/6/bin/hello.sh [6localhost bin]$ ls hello.sh ls: 无法访问hello.sh: 没有那个文件或目录&#xff0c;为什么在/bin文件下却不能打开&#xff0c; [6localhost …...

CSS mask-image 实现边缘淡出过渡效果

使用场景 在生产环境中&#xff0c;遇到一个需求&#xff0c;需要在一个深色风格的大屏页面中&#xff0c;嵌入 Google Maps。为了减少违和感&#xff0c;希望地图四边能够淡出过渡。 这里的“淡出过渡”&#xff0c;关键是淡出&#xff0c;而非降低透明度。 基于 Google Ma…...

电子元器件—电容和电感(一篇文章搞懂电路中的电容和电感)(笔记)(面试考试必备知识点)电容和电感作用、用途、使用、注意事项、特点等(面试必备)-笔记(详解)

作者&#xff1a;Whappy 座右铭&#xff1a;不曾拥有&#xff0c;何来失去&#xff01; 时间&#xff1a;2024年8月2日08:40:04 一、电容的作用 储能&#xff1a; 电容器通过充电储存电荷在电容板上&#xff0c;形成电场储存电能。当需要释放储存的电能时&#xff0c;电荷…...

2024HDU Contest 5 Problem 5

题目链接 从大到小枚举gcd的值 d d d&#xff0c;以及编号为 d d d的倍数的点&#xff0c; [ d , 2 d , 3 d , … ] [d,2d,3d,\dots] [d,2d,3d,…]。 然后对于任何一条边 ( x , y ) (x,y) (x,y)&#xff0c;如果 x x x的子树和 y y y的子树里都有编号为 d d d倍数的点&#xf…...

nGQL入门

引言 nGQL&#xff08;NebulaGraph Query Language&#xff09;是用于操作 NebulaGraph 的查询语言。它的语法类似于 Cypher&#xff0c;但有自己独特的特性。以下是一些 nGQL 的基本语法和操作示例&#xff0c;以帮助你入门。 基本概念 节点&#xff08;Vertex&#xff09;…...

[CP_AUTOSAR]_系统服务_DEM模块(二)功能规范介绍

目录 1、DEM 功能规范描述1.1、Startup behavior1.2、Monitor re-initialization 在前面 《[CP_AUTOSAR]_系统服务_DEM模块&#xff08;一&#xff09;》文中&#xff0c;简要介绍了 DEM 模块的功能、与其它模块之间的功能交互&#xff0c;本文将接着介绍 DEM 模块的功能规范。…...

Linux中yum、rpm、apt-get、wget的区别,yum、rpm、apt-get常用命令,CentOS、Ubuntu中安装wget

文章目录 一、常见Linux发行版本二、Linux中yum、rpm、apt-get、wget的区别2.1 yum2.2 rpm2.3 apt-get2.4 wget2.5 总结 三、CentOS中yum的作用3.1 yum清空缓存列表3.2 yum显示信息3.3 yum搜索、查看3.4 yum安装3.5 yum删除、卸载程序3.6 yum包的升级、降级 四、Ubuntu中apt-ge…...

IPython的使用技巧2

关注我&#xff0c;持续分享逻辑思维&管理思维&面试题&#xff1b; 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导&#xff1b; 推荐专栏《10天学会使用asp.net编程AI大模型》&#xff0c;目前已完成所有内容。一顿烧烤不到的费用&#xff0c;让人能紧跟时代的…...

win10打开程序闪退的解决方法,亲测好用

当我们在使用win10系统的时候&#xff0c;可能会遇到安装某些程序后无法正常使用&#xff0c;一打开就闪退&#xff0c;或者点击右下角图标就消失了&#xff0c;而其他程序却可以正常打开使用。下面小编就来和大家分享亲测好用的win10打开程序闪退的解决办法。 问题原因分析&a…...

木舟0基础学习Java的第二十一天(数据库,MySQL,SQLyog)

数据库 数据库&#xff1a;按照数据结构来组织 存储数据的厂库 数据管理系统(Database Management System,DBMS)&#xff1a;一套操作和管理数据库的软件 用于简历 使用 维护数据库 关系型数据库&#xff1a;采用关系模型作为数据组织方式 逻辑结构是一张二维表 由行和列组成…...

python-鼠标绘画线条程序

闲来无聊简单编写了一个绘图小程序。 主要思路 主要是基于Python中的内置模块turtle编写的&#xff0c;简单扩展了一下&#xff0c;通过绑定事件能够达到鼠标绘制、删除、存储已经绘制图案的线条这几个功能。 路径结构 -draw- define.py- main.py- myturtle.py使用 点住鼠…...

DoL-Lyra游戏增强工具新手入门

DoL-Lyra游戏增强工具新手入门 【免费下载链接】DOL-CHS-MODS Degrees of Lewdity 整合 项目地址: https://gitcode.com/gh_mirrors/do/DOL-CHS-MODS DoL-Lyra游戏增强工具是一款专为Degrees of Lewdity游戏设计的完整整合方案&#xff0c;集成了最新汉化补丁、视觉增强…...

保姆级教程:用MPTool给瑞昱RTL8762CMF蓝牙芯片烧录固件(附串口接线图)

零基础实战&#xff1a;RTL8762CMF蓝牙芯片固件烧录全流程指南 拿到一块搭载RTL8762CMF的开发板时&#xff0c;最关键的步骤莫过于正确烧录固件。作为一款支持蓝牙5.0的低功耗芯片&#xff0c;RTL8762CMF在物联网设备中应用广泛。但很多开发者在首次接触时&#xff0c;往往会在…...

德尔·考德威尔:从微波校准到计量标准,塑造现代精密测量的隐形基石

1. 一位计量学巨匠的遗产&#xff1a;从德尔考德威尔看精密测量的基石在电子工程与测试测量这个庞大而精密的领域里&#xff0c;我们常常关注的是最新的示波器带宽、最前沿的矢量网络分析技术&#xff0c;或是某个芯片的测试方案。然而&#xff0c;支撑起整个现代工业测量体系可…...

weclaw:面向生产环境的现代化Python爬虫框架设计与实战

1. 项目概述与核心价值最近在开源社区里&#xff0c;一个名为weclaw的项目引起了我的注意。这个项目由shp-ai组织维护&#xff0c;从名字上乍一看&#xff0c;可能有点摸不着头脑——“weclaw”听起来像“we claw”&#xff08;我们抓取&#xff09;的变体。点进去一看&#xf…...

规划求解(Solver)实战:利用Excel的Solver工具进行投资组合优化

投资界有句老话:"别把鸡蛋放在一个篮子里。"但很少有人告诉你后半句:“每个篮子放多少鸡蛋,才是大学问。“Solver就是投资组合的"营养师”,帮你配出最佳"营养比例”。就像投资界的红绿灯,约束条件告诉你什么可以做,什么不可以碰。 一、什么是规划求解…...

婚宴座位规划中的优化算法:量子与经典方法对比

1. 婚宴座位规划中的优化算法对决&#xff1a;量子与经典方法谁更胜一筹&#xff1f;筹备婚礼时&#xff0c;最令人头疼的任务之一就是安排座位。去年我为自己婚礼设计座位表时&#xff0c;尝试了各种方法——从手工调整Excel表格到使用专业活动策划软件&#xff0c;结果都不尽…...

孤舟笔记 IO 与网络编程篇六 什么是网络四元组?它是理解TCP连接的关键

文章目录一、先说结论&#xff1a;四元组核心事实二、四元组是什么&#xff1f;三、一个端口能建立多少连接&#xff1f;四、客户端的连接上限五、NAT 和四元组六、四元组在负载均衡中的应用网络四元组 全景回答技巧与点评标准回答加分回答面试官点评个人网站面试官问"一个…...

避坑指南:STM32CubeMX配置红外接收,为什么你的解码总是不准?

STM32CubeMX红外接收解码优化实战&#xff1a;从原理到精准解析 红外遥控技术在家电控制、智能设备交互中扮演着重要角色&#xff0c;但许多开发者在STM32平台上实现红外接收解码时&#xff0c;常遇到信号不稳定、误码率高等问题。本文将深入分析红外接收解码的核心原理&#…...

InjectFix实战解析:在Unity IL2CPP环境下实现C#热修复的权衡与策略

1. InjectFix在IL2CPP环境下的核心价值 当你的Unity手游在应用商店上线后突然出现致命Bug&#xff0c;传统解决方案往往需要重新打包、提交审核、等待上架&#xff0c;这个过程可能耗时数天。而InjectFix提供的C#热修复能力&#xff0c;可以在不更新客户端的情况下快速修复线上…...

Linux 基础篇 -- Linux介绍(怎么读、是什么、创始人、吉祥物、发版本、目前存在的操作系统) Linux和Unix的关系 linux和Windows比较

Linux 基础篇 – Linux介绍&#xff08;怎么读、是什么、创始人、吉祥物、发版本、目前存在的操作系统&#xff09; & Linux和Unix的关系 & linux和Windows比较 文章目录 1. Linux介绍 1.1 Linux怎么读:1.2 Linux是什么&#xff1a;1.3 Linux创始人:1.4 Linux 的吉祥…...