?1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> ?2 <% ?3 String path = request.getContextPath(); ?4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; ?5 %> ?6 ??7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ?8 <html> ?9 ??<head> 10 ????<base href="<%=basePath%>"> 11 ?????12 ????<title>My JSP ‘login.jsp‘ starting page</title> 13 ?????14 ????<meta http-equiv="pragma" content="no-cache"> 15 ????<meta http-equiv="cache-control" content="no-cache"> 16 ????<meta http-equiv="expires" content="0"> ????17 ????<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 18 ????<meta http-equiv="description" content="This is my page"> 19 ????<!-- 20 ????<link rel="stylesheet" type="text/css" href="styles.css"> 21 ????--> 22 ????<script> 23 ????????function rcheck(){ 24 ????????????var name=document.getElementById("name").value; 25 ????????????var pwd=document.getElementById("pwd").value; 26 ????????????var check=document.getElementById("check"); 27 ????????????if(name!=""){ 28 ????????????????if(name.length>=2){ 29 ????????????????????if(pwd!=""){ 30 ????????????????????????if(pwd.length>=6){ 31 ????????????????????????check.innerHTML="<strong style=‘color:red‘>恭喜您注册成功</strong>" 32 ????????????????????}else{ 33 ????????????????????????check.innerHTML="<strong style=‘color:red‘>密码不能小于6位数</strong>" 34 ????????????????????} 35 ????????????????????}else{ 36 ????????????????????????check.innerHTML="<strong style=‘color:red‘>密码不能为空</strong>" 37 ????????????????????} 38 ????????????????}else{ 39 ????????????????????check.innerHTML="<strong style=‘color:red‘>账号长度必须大于1位</strong>" 40 ????????????????} 41 ????????????}else{ 42 ????????????????check.innerHTML="<strong style=‘color:red‘>账号不能为空</strong>" 43 ????????????} 44 ????????} 45 ?????????46 ????????function check(){ 47 ????????????var name=document.getElementById("name").value; 48 ????????????var pwd=document.getElementById("pwd").value; 49 ????????????var check=document.getElementById("check"); 50 ????????????if(name.length==0||pwd.length==0){ 51 ????????????????check.innerHTML="<strong style=‘color:red‘>账号或密码不能为空</strong>" 52 ????????????}else{ 53 ????????????????document.forms[0].submit(); 54 ????????????} 55 ????????} 56 ????</script> 57 ?????58 ????<style type="text/css"> 59 ?????????60 ????????*{ 61 ????????????margin: 0; 62 ????????????padding: 0; 63 ????????} 64 ?????????65 ????????body{ 66 ????????????height:100%; 67 ????????????width:100%; 68 ????????????background-image: url(img/background.JPG); 69 ????????????background-repeat:contain; ?70 ?????????????71 ????????} 72 ????????#div{ 73 ????????????border:1px solid black; 74 ????????????height:200px; 75 ????????????width:300px; 76 ????????????background-color: rgba(0,0,0,0.5); 77 ????????????border-radius:20px; 78 ????????????margin: 200px auto; 79 ?????????????80 ?????????????81 ????????} 82 ????????table{ 83 ????????????height:100%; 84 ????????????width:100%; 85 ????????????padding-top:10px; 86 ????????????padding-bottom: 30px; 87 ????????????color:white; 88 ????????????font-family: sans-serif; 89 ????????????font:bolder; 90 ????????} 91 ????????.res{ 92 ????????????width: 100px; 93 ????????????height:30px; 94 ????????????background-color: orange; 95 ????????????border: 0px; 96 ????????????border-radius:5px; 97 ????????????color: white; 98 ????????} 99 ????????.login{100 ????????????width: 100px;101 ????????????height:30px;102 ????????????background-color: green;103 ????????????border: 0px;104 ????????????border-radius:5px;105 ????????????color: white;106 ????????????cursor: pointer;107 ????????}108 ????????input {109 ????????????width: 200px;110 ????????????height:30px;111 ????????????border-radius:5px;112 ????????????border: 0px;113 ????????????cursor: pointer;114 ????????}115 ????????#check{116 ????????????width: 200px;117 ????????????height:30px;118 ????????????margin: -200px 700px;119 ????????}120 ????</style>121 ??</head>122 ??123 ??<body>124 ??????<div id="div">125 ???????????<form action="loginCheck" method="post">126 ????????<table style="text-align: center;">127 ????????????<caption>欢迎来到办公系统</caption>128 ????????????<tr>129 ????????????????<td>130 ????????????????账户:<input type="text" name="userName" placeholder="请输入账户名" id="name" style="padding-left: 10px">131 ????????????????</td>132 ????????????</tr>133 ????????????<tr>134 ????????????????<td>135 ????????????????密码:<input type="password" name="userPwd" placeholder="请输入账户密码" id="pwd" style="padding-left: 10px">136 ????????????????</td>137 ????????????</tr>138 ????????????<tr>139 ????????????????<td colspan="2" valign="bottom">140 ????????????????????<input type="button" value="登录" ?class="login" onclick="check()" >141 ????????????????</td>142 ????????????</tr>143 ????????????<tr>144 ????????????????<td colspan="2" valign="center" >145 ????????????????????<input type="button" value="注册" class="res" onclick="rcheck()">146 ????????????????</td>147 ????????????</tr>148 ????????????149 ????????</table>150 ????</form>151 ??????</div>152 ??????153 ??????<div id="check"></div>154 ???155 ??</body>156 </html>用js在前台界面进行账户密码的检测，账户和密码符合要求后可进行登录
原文地址：https://www.cnblogs.com/ztt0918/p/8252775.html