利用HTML+JS编写登录界面
通过form表单的get传参方式传递用户名密码，并通过document.getElementById获得参数，进行前端验证判断
HTML代码
<!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>C1064-首页登录</title>
</head>
<body>
<!-- 大标题 -->
<h1>
登录入口
</h1>
<!-- 本地图片引入 -->
<p>
<img src="google.png" width="200" height="60" alt="" srcset="">
</p>
<p>
<!-- 表单提交 -->
<form name="user" action="#" method="get" >
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="passwd" id="passwd"/></td>
</tr>
<tr>
<td>
<!-- 引入外部JS进行登录控制 -->
<input type="submit" value="登录" id="id" onclick="return sub()" />
<script src="Login_fuc_sub.js">
</script>
</td>
</tr>
</table>
</form>
</p>
</body>
</html>
JS代码
function sub(){
var user1="admin123"
var username=document.getElementById("username").value
var passwd=document.getElementById("passwd").value
if ((username+passwd) == user1 ){
alert(username+"欢迎登录");
} else {
alert("密码错误或用户不存在");
}
}
