本文展示了如何使用VS 2019创建一个简单的校园登录系统，包含HTML、CSS和JavaScript实现的前端界面，以及登录验证功能。用户输入用户名和密码，点击登录按钮后，通过JavaScript进行验证并实现页面跳转。
我们来学习一下用VS 2019，写一个校园登录系统，效果图如下；
直接上代码吧，懒得废话了。看得懂就看，看不懂就算了吧。
<!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">
<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="login">
<div class="message">校园登录系统</div>
<div id="darkbannerwrap"></div>
<form id="frmLogin">
<div class="form-row form-group">
<label for="" class="col-form-label col-3 text-right">
用户名：
</label>
<input type="text" class="form-control col-9" id="txtName">
</div>
<div class="form-row form-group">
<label for="" class="col-form-label col-3 text-right">
密码：
</label>
<input type="text" class="form-control col-9" id="password" onkeyup="value=value.replace(/\D/g,'')">
</div>
<div class="form-row form-group">
<button class="btn" type="button" id="btnLogin">登录</button>
</div>
</form>
</div>
<script>
//实现简单登录功能
document.getElementById("btnLogin").onclick=function()//事件绑定
{
//获取登录信息
var userName = document.getElementById("txtName").value;
var passWord = document.getElementById("password").value;
//判断
if(userName!=""&&userName!=undefined) //用户名判断
{
if(passWord!=""&&passWord!=undefined) //密码判断
{
if(userName=="root"&&passWord=="123") //正确性验证
{
//页面跳转
window.location.href="main.html";//页面跳转
}
else{
alert("登录失败");
}
}
else{
alert("密码为空！");
}
}
else{
alert("用户名为空！");
}
}
</script>
</body>
</html>
扫一扫
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
