<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单事件</title>
<style type="text/css">
#login{
width: 400px;
height: 250px;
background-color: #f2f2f2;
border:1px solid #DDDDDD;
padding: 5px;
}
#login fieldset {
border: none;
margin-top: 10px;
}
#login fieldset legend{
font-weight: normal;
}
#login fieldset p{
display: block;
height: 30px;
}
#login fieldset p label {
display: block;
float:left;
text-align: right;
font-size: 12px;
width: 90px;
height: 30px;
line-height: 30px;
}
#login fieldset p input {
display: block;
float:left;
border: 1px solid #999;
width: 250px;
height: 30px;
line-height: 30px;
}
#login fieldset p input.code{
width: 60px;
}
#login fieldset p img{
margin-left: 10px;
}
#login fieldset p a{
color: #057BD2;
font-size: 12px;
text-decoration: none;
margin: 10px;
}
#login fieldset p input.btn{
background: url("./img/login.gif") no-repeat;
width: 98px;
height: 32px;
margin-left: 60px;
color: #ffffff;
cursor: pointer;
}
#login fieldset p input.input_focus{
background-color: white;
}
</style>
<script type="text/javascript" src="./js/jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
//鼠标事件 click事件提交表单，鼠标移至按钮，按钮字体变粗。移出按钮则字体为正常字体
$(":button").bind("mouseover",function(){
$(this).css("font-weight"," bold");
}).bind("mouseout",function(){
$(this).css("font-weight"," normal");
});
//用户名输入框的焦点事件
$("[name='member']").bind("focus",function(){
$(this).css("background-color","#BEE7FC");
$(this).val("");
}).bind("blur",function(){
$(this).css("background-color","white");
var reg=/^[0-9a-zA-Z]{2,8}$/;
if(!reg.test($.trim($(this).val()))){
$(this).val("请输入用户名");
$("span").html("用户名不能未空").css("color","red");;
return;
};
$("span").html("√").css("color","green");;
});
$("#checkImg").bind("click",function(){
var temp=new Date().getTime().toString(36);
$("#checkImg").attr("src","servlet/GetCaptcha?temp="+temp);
});
//键盘事件，敲击回车键进行表单提交,keyCode的数值代表不同的键盘按键
//JavaScript需要区分keyCode(IE)和which(FF)的兼容性
$(document).keypress(function(e){
if(e.keyCode==13){
$("#login").submit();
}
});
});
</script>
</head>
<body>
<form id="login" action="servlet/dologinservlet" method="post">
<fieldset>
<legend>用户登录</legend>
<p>
<label>用户名：</label>
<input name="member" type="text" value="请输入用户名" />
</p>
<p>
<label>密码：</label>
<input name="password" type="text" />
</p>
<p>
<label>验证码：</label>
<input name="code" type="text" class="code" />
<img src="servlet/GetCaptcha"
alt="验证码" name="checkImg" id="checkImg"
style="position:relative; top:5px; left:15px; " />
</p>
<p>
<input name="" type="button" class="btn" value="登录" />
<a href="#">注册</a><span>|</span><a href="#">忘记密码？</a>
${meg}
</p>
</fieldset>
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单事件</title>
<style type="text/css">
#login{
width: 400px;
height: 250px;
background-color: #f2f2f2;
border:1px solid #DDDDDD;
padding: 5px;
}
#login fieldset {
border: none;
margin-top: 10px;
}
#login fieldset legend{
font-weight: normal;
}
#login fieldset p{
display: block;
height: 30px;
}
#login fieldset p label {
display: block;
float:left;
text-align: right;
font-size: 12px;
width: 90px;
height: 30px;
line-height: 30px;
}
#login fieldset p input {
display: block;
float:left;
border: 1px solid #999;
width: 250px;
height: 30px;
line-height: 30px;
}
#login fieldset p input.code{
width: 60px;
}
#login fieldset p img{
margin-left: 10px;
}
#login fieldset p a{
color: #057BD2;
font-size: 12px;
text-decoration: none;
margin: 10px;
}
#login fieldset p input.btn{
background: url("./img/login.gif") no-repeat;
width: 98px;
height: 32px;
margin-left: 60px;
color: #ffffff;
cursor: pointer;
}
#login fieldset p input.input_focus{
background-color: white;
}
</style>
<script type="text/javascript" src="./js/jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
//鼠标事件 click事件提交表单，鼠标移至按钮，按钮字体变粗。移出按钮则字体为正常字体
$(":button").bind("mouseover",function(){
$(this).css("font-weight"," bold");
}).bind("mouseout",function(){
$(this).css("font-weight"," normal");
});
//用户名输入框的焦点事件
$("[name='member']").bind("focus",function(){
$(this).css("background-color","#BEE7FC");
$(this).val("");
}).bind("blur",function(){
$(this).css("background-color","white");
var reg=/^[0-9a-zA-Z]{2,8}$/;
if(!reg.test($.trim($(this).val()))){
$(this).val("请输入用户名");
$("span").html("用户名不能未空").css("color","red");;
return;
};
$("span").html("√").css("color","green");;
});
$("#checkImg").bind("click",function(){
var temp=new Date().getTime().toString(36);
$("#checkImg").attr("src","servlet/GetCaptcha?temp="+temp);
});
//键盘事件，敲击回车键进行表单提交,keyCode的数值代表不同的键盘按键
//JavaScript需要区分keyCode(IE)和which(FF)的兼容性
$(document).keypress(function(e){
if(e.keyCode==13){
$("#login").submit();
}
});
});
</script>
</head>
<body>
<form id="login" action="servlet/dologinservlet" method="post">
<fieldset>
<legend>用户登录</legend>
<p>
<label>用户名：</label>
<input name="member" type="text" value="请输入用户名" />
</p>
<p>
<label>密码：</label>
<input name="password" type="text" />
</p>
<p>
<label>验证码：</label>
<input name="code" type="text" class="code" />
<img src="servlet/GetCaptcha"
alt="验证码" name="checkImg" id="checkImg"
style="position:relative; top:5px; left:15px; " />
</p>
<p>
<input name="" type="button" class="btn" value="登录" />
<a href="#">注册</a><span>|</span><a href="#">忘记密码？</a>
${meg}
</p>
</fieldset>
</form>
</body>
</html>
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
