输入一个用户名，点击登录按钮，如果输入tom，提示“已存在“，否则提示“欢迎使用“

长安梦我

于 2022-05-06 08:18:21 发布

阅读量5.9k

点赞数

分类专栏： html 文章标签： javascript html5

本文链接：https://blog.csdn.net/zhongqingtian/article/details/124601806

版权

html 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

输入一个用户名，点击登录按钮，如果输入tom，提示"已存在"，否则提示"欢迎使用"

以下为代码演示，步骤详细，注释清晰：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>验证用户名是否存在</title>
	</head>
	<body>
		<!-- 给用户名设置id，让后面的JS代码找到这个输入框 -->
		用户：<input type="text" id="uname">
		<span id="msg">请输入用户名</span><br>
		<input type="button" value="请登录" id="btn">
		
		<!-- 给页面添加一对JS代码 -->
		<!-- script写在body最后面，保证所有资源都被加载到 -->
		<script>
		//console.log(uname)
		//1.在网页中找到登录按钮，并绑定一个操作（点击事件）onclick
		btn.onclick=function(){
			//2.获取input元素用户输入的值
			console.log(uname.value)
			//3.判断获取到的用户名
			if(uname.value==="tom"){
				//4.1显示结果，修改span标签中的内容
				msg.innerHTML="已存在"
			}else{
				//4.2显示结果，不是tom，显示"欢迎使用"
				msg.innerHTML="欢迎使用"
			}
		}
		</script>
	</body>
</html>