输入一个用户名,点击登录按钮,如果输入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>