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

不死鸟.亚历山大.狼崽子

于 2024-08-02 17:00:48 发布

阅读量493

点赞数 7

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/u013938578/article/details/140871530

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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，说明输入的不是数字，此时弹出警告框提示用户“必须输入数字”。

不死鸟.亚历山大.狼崽子

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录