login.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
font: 12px 宋体;
background: #4BB8EF url(images/bg.gif) repeat-x;
}

img {
border: 0;
}

.login-top {
100%;
height: 186px;
margin: 147px auto 0;
background: url(images/login_01.gif) no-repeat center 0;
}

.login-area {
100%;
height: 140px;
margin: 0 auto;
background: url(images/login_02.gif) no-repeat center 0;
}

.login-area form {
290px;
margin: 0 auto;
}

.login-area label {
clear: left;
float: left;
margin-top: 13px;
60px;
font: 600 14px 宋体;
}

.login-area input {
122px;
height: 16px;
margin-top: 11px;
border: 1px #767F94 solid;
font: 12px/16px 宋体;
}

input.login-sub {
104px;
height: 34px;
border: 0;
background: url(images/login_sub.gif) no-repeat 0px 1px; *
margin-top: 5px;
}

.login-copyright {
100%;
height: 30px;
margin: 18px auto 0;
background: url(images/copyright.gif) no-repeat center 0;
}

.Sn,.validateCode,.password {
color: red;
}
</style>
<script type="text/javascript">

</script>
</head>
<body onload="check()">
<div class="login-top"></div>
<div class="login-area">
<form action="login/doLogin" method="post" onsubmit="return chec();">
<label> 工  号： </label> <input type="text" name="sn"
class="empSn" value="${param.sn }" /><span class="Sn"></span> <label>
密  码： </label> <input type="password" name="password"
value="${param.password }" /><span class="password"></span> <label>
验证码： </label> <input type="text" name="validateCode" size="6" /><span
class="validateCode"></span>

<input type="image" src="login/getRand"
onclick="return changeValidateCode(this)" title="点击图片刷新验证码" /> <input
type="submit" class="login-sub" value="" /> <input type="hidden"
id="msg" value="${requestScope.msg }" />
</form>
</div>
<div class="login-copyright"></div>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".empSn").blur(function(){
var Sn = $("input[name='sn']").val();
var zh = /^d{3}$/;
if(Sn == ""){
$("input[name='sn']").focus();
$(".Sn").text("请输入用户名");
return false;
}

if(!zh.test(Sn)){
$(".Sn").text("用户名错误");
$("input[name='sn']").focus();
return false;
}
$.get("login/isEmp","Sn="+Sn,function(data){
$(".Sn").text("");
if(data == 0){
$(".Sn").text("用户名错误");
$("input[name='sn']").focus();
}
},"text");
});
});
function chec(){
var Sn = $("input[name='sn']").val();
var password = $("input[name='password']").val();
var validateCode = $("input[name='validateCode']").val();
if(Sn == ""){
$("input[name='sn']").focus();
$(".Sn").text("请输入用户名");
return false;
}else if(password == ""){
$("input[name='password']").focus();
$(".password").text("请输入密码");
return false;
}else if(validateCode == ""){
$("input[name='validateCode']").focus();
$(".password").text("");
$(".validateCode").text("请输入验证码");
return false;
}
}

function changeValidateCode(obj) {
//获取当前的时间作为参数，无具体意义
var timenow = new Date().getTime();
//每次请求需要一个不同的参数，否则可能会返回同样的验证码
//这和浏览器的缓存机制有关系，也可以把页面设置为不缓存，这样就不用这个参数了。
obj.src = "login/getRand?d=" + timenow;
return false;
}
function check() {
var msg = document.getElementById("msg").value;
if (msg.length != 0) {
alert(msg);
document.getElementById("msg").value = "";
}
}
</script>
</body>
</html>