实现原理
1获取各种值
2执行if-else嵌套
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非空验证</title>
<style>
* {
margin: 0;
padding: 0;
}
.main{
width: 300px;
height: 204px;
position: absolute;
padding: 10px;
border: solid 2px #1B5E20;
background-color: #E8F5E9;
}
</style>
</head>
<body>
<div class="main">
<div class="login"></div>
<div class="log-con">
<span>登录</span>
<p id="errorMsg"></p>
<input type="text" id="username" class="name" placeholder="输入用户名"><br>
<input type="password" id="password" class="password" placeholder="输入密码">
<br><button id="login" onclick="login()">登录</button>
</div>
</div>
</div>
<script>
function login(){
// 获取用户输入的值
var username=document.querySelector("#username").value;
var password=document.querySelector("#password").value;
// 获取错误信息提示框
var errorMsg=document.querySelector("#errorMsg");
console.log("username");
console.log("password");
// 执行判断
if(username==""||password==""){
errorMsg.innerHTML="用户名或密码为空";
}else{
if(username==="czc"&&password==="admin"){
alert("登录成功")
}else{
errorMsg.innerHTML="用户名或密码错误"
}
}
}
</script>
</body>
</html>
