java web之注册页面

最新推荐文章于 2023-09-27 20:14:30 发布

zhao1129166939

最新推荐文章于 2023-09-27 20:14:30 发布

阅读量1.3k

点赞数 1

分类专栏： Java web 文章标签： java web java javascript css js

本文链接：https://blog.csdn.net/zhao1129166939/article/details/39737317

版权

Java web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、regist.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册页面</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">

<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>

<script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>
</head>

<body>
<div id="divMain">
<div id="divTitle">
<span id="spanTitle">新用户注册</span>
</div>
<div id="divBody">
<table id="tableForm" >
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput">
<input class="inputClass" type="text" name="loginname" id="loginname"/>
</td>
<td class="tdError">
<label class="errorClass" id="loginnameError">用户名不能为空！</label>
</td>
</tr>
<tr>
<td class="tdText">登录密码：</td>
<td>
<input class="inputClass" type="password" name="loginpass" id="loginpass"/>
</td>
<td>
<label class="errorClass" id="loginpassError"></label>
</td>
</tr>
<tr>
<td class="tdText">确认密码：</td>
<td>
<input class="inputClass" type="password" name="reloginpass" id="reloginpass"/>
</td>
<td>
<label class="errorClass" id="reloginpassError"></label>
</td>
</tr>
<tr>
<td class="tdText">Email：</td>
<td>
<input class="inputClass" type="text" name="email" id="email"/>
</td>
<td>
<label class="errorClass" id="emailError"></label>
</td>
</tr>
<tr>
<td class="tdText">验证码：</td>
<td>
<input class="inputClass" type="text" name="verifyCode" id="verifyCode"/>
</td>
<td>
<label class="errorClass" id="verifyCodeError"></label>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"/></div>
</td>
<td>
<label><a href="javascript:_hyz()">换一张</a></label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/>
</td>
<td>
<label></label>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

2、regist.css

#divMain {margin-left:240px}
#divTitle{line-height: 30px;width:880px;height: 30px;border: 1px solid #d0d0d0;background: url(/goods/images/bg_btns.png) repeat-x 0px -132px;}
/*给divtitle添加边框，宽：880px高：30px 线宽：1px 线颜色：#d0d0d0灰色
background: url(/goods/images/bg_btns.png) repeat-x 0px -132px;
上面语句表示给元素设置背景图片URL表示背景图片地址，repeat-x表示在x轴循环从0px开始到132px结束

border-left表示显示左边框线，border-right表示显示右边框线，border-bottom表示显示下边框线
line-height:表示设置行高，设置过行高可以使内容居中
#spanTitle{margin-left:18px}表示左边与边框间距
*/
#spanTitle{margin-left: 18px;}
#divBody{width:880px;height:400px;border-left:1px solid #d0d0d0; border-right:1px solid #d0d0d0;border-bottom:1px solid #d0d0d0;}
.tdText{width:300px;text-align:right;}/*文本区域宽度为300px;text-align:right为设置内容右对齐*/
.tdInput{width:250px;}/*输入区域宽度为250px*/
.tdError{width:300px;}/*错误信息显示区域宽度为300px*/
#tableForm{line-height:50px;}/*class用点，id用#*/
.inputclass{width:240px;height:32px;border:1px solid #7f9db9;line-height:32px;padding-left: 4px;}
/*inputclass为文本输入区的类属性，可设置其宽度为240px，高度为32px,border:1px solid #7f9db9设置边框线的宽度及颜色，设置其高度目的使其光标居中,padding-left使光标与左边框有一定间距*/
#imgVerifyCode{width:100px;}
#divVerifyCode{text-align:center;border:1px solid #e2e2e2;}
.errorClass{background:url(/goods/images/error.png) no-repeat;color:#f40000;font-size:10pt;border:1px solid #ffb8b8;background-color: #fef2f2;padding: 8px 8px 8px 35px;}
/*#padding{a,b,c,d}表示顺时针，上、右、下、左与边框间距*/

3、regist.js

$(function() {
/*
* 1. 得到所有的错误信息，循环遍历之。调用一个方法来确定是否显示错误信息！
*/
$(".errorClass").each(function() {
showError($(this));//遍历每个元素，使用每个元素来调用showError方法
});

/*
* 2. 切换注册按钮的图片
*/
$("#submitBtn").hover(
/*
*
* hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
* 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数
*
*/

function() {
$("#submitBtn").attr("src", "/goods/images/regist2.jpg");
},
function() {
$("#submitBtn").attr("src", "/goods/images/regist1.jpg");
}
);
});

/*
* 判断当前元素是否存在内容，如果存在显示，不页面不显示！
*/
function showError(ele) {
var text = ele.text();//获取元素的内容
if(!text) {//如果没有内容
ele.css("display", "none");//隐藏元素
} else {//如果有内容
ele.css("display", "");//显示元素
}
}

/*
* 换一张验证码
*/
function _hyz() {
/*
* 1. 获取<img>元素
* 2. 重新设置它的src
* 3. 使用毫秒来添加参数
*/
$("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime());
}

4、总结

反思：一定要细心，引用文件时文件路径不能写错

jQuery hover事件

　　hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

　　当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

参数 :
over (Function) : 鼠标移到元素上要触发的函数
out (Function): 鼠标移出元素要触发的函数

示例 :
鼠标悬停的表格加上特定的类

jQuery 代码:

$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);