Goods:注册页面实现
做个小项目重新回顾一下以前的东东
效果如图所示
regist.jsp代码：
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 3 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5 <html> 6 <head> 7 <title>注册页面</title> 8 9 <link rel="stylesheet" type="text/css" 10 href="<c:url value='/jsps/css/user/regist.css'/>"> 11 <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script> 12 <script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script> 13 14 </head> 15 <body> 16 <div id="divMain"> 17 <div id="divTitle"> 18 <span id="spanTitle">新用户注册</span> 19 </div> 20 <div id="divBody"> 21 <table id="tableForm"> 22 <tr> 23 <td class="tdText">用户名:</td> 24 <td class="tdInput"><input class="inputClass" type="text" 25 name="loginname" id="loginname"> 26 </td> 27 <td class="tdError"><label class="errorClass" id="loginnameError">用户名不能为空！</label> 28 </td> 29 </tr> 30 <tr> 31 <td class="tdText">登录密码:</td> 32 <td><input class="inputClass" type="password" 33 name="loginpass" id="loginpass"> 34 </td> 35 <td><label class="errorClass" id="loginpassError"></label> 36 </td> 37 </tr> 38 <tr> 39 <td class="tdText">确认密码:</td> 40 <td><input class="inputClass" type="password" 41 name="reloginpass" id="reloginpass"> 42 </td> 43 <td><label class="errorClass" id="reloginpassError"></label> 44 </td> 45 </tr> 46 <tr> 47 <td class="tdText">Email:</td> 48 <td><input class="inputClass" type="text" name="email" 49 id="email"> 50 </td> 51 <td><label class="errorClass" id="emailError"></label> 52 </td> 53 </tr> 54 <tr> 55 <td class="tdText">图形验证码:</td> 56 <td><input class="inputClass" type="text" name="verifyCode" 57 id="verifyCode"> 58 </td> 59 <td><label class="errorClass" id="verifyCodeError"></label> 60 </td> 61 </tr> 62 <tr> 63 <td></td> 64 <td> 65 <div id="divVerifyCode"> 66 <img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>" /> 67 </div></td> 68 <td> 69 <label><a href="javascript:_hyz()">换一张</a> 70 </label> 71 </td> 72 </tr> 73 <tr> 74 <td></td> 75 <td><input class="inputClass" type="image" 76 src="<c:url value='/images/regist1.jpg'/>" id="submitBtn" /></td> 77 <td><label></label> 78 </td> 79 </tr> 80 </table> 81 </div> 82 83 </div> 84 </body> 85 </html>
regist.css代码：
1 #divTitle{width: 880px;height: 30px;border: 1px solid #d0d0d0;line-height: 30px;background: url("/goods/images/bg_btns.png") repeat-x 0px -132px; } 2 #spanTitle{margin-left: 18px;font-weight: 900;} 3 #divBody{width:880px;height: 400px;border-bottom: 1px solid #d0d0d0;border-right: 1px solid #d0d0d0;border-left: 1px solid #d0d0d0; 4 } 5 #divMain{margin-left: 240px;} 6 .tdText{width: 300px;text-align: right;} 7 .tdInput{width: 250px;} 8 .tdError{width: 300px;} 9 #tableForm{line-height: 50px;} 10 .inputClass{width: 240px;hegiht:32px;border: 1px solid #7f9db9;line-height: 32px;padding-left: 10px;} 11 #imgVerifyCode{width: 100px;} 12 #divVerifyCode{text-align: center;border:1px solid #e2e2e2;} 13 .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; } 14 #submitBtn{padding: 0 };
regist.js代码:
1 $(function() { 2 // 得到所有的错误信息，循环遍历 调用一个方法来确定是否显示错误信息 3 $(".errorClass").each(function() { 4 showError($(this)); 5 }); 6 7 // 切换注册按钮的图片 8 $("#submitBtn").hover(function() { 9 $("#submitBtn").attr("src", "/goods/images/regist2.jpg"); 10 }, function() { 11 $("#submitBtn").attr("src", "/goods/images/regist1.jpg"); 12 }); 13 }); 14 15 function showError(ele) { 16 var text = ele.text(); 17 if (!text) 18 ele.css("display", "none"); 19 else { 20 ele.css("display", ""); // 有内容显示元素 21 } 22 } 23 // 换一张验证码 24 function _hyz() { 25 // 获取image元素 重新获取src 添加参数 使用毫秒数来添加参数/ 26 27 $(imgVerifyCode).attr("src", 28 "/goods/VerifyCodeServlet?a=" + new Date().getTime()); 29 }
