登录弹出层页面：
<!--登录验证 --> <script type="text/javascript" src="js/login/jquery.validate.js"></script> <script type="text/javascript" src="js/login/jquery.validate.messages_cn.js"></script> <!-- end --> <script type="text/javascript"> $(document).ready(function(){ $(".check_my_car").click(function(){ $(".container1").show(); $(".alert_bg").show(); }); $(".colse").click(function(){ $(".container2").hide(); $(".container1").hide(); $(".alert_bg").hide(); }); $(".diagnoe_btn_choosecar").click(function(){ $(".top_tan-one").hide(); $(".container1").show(); $(".alert_bg").show(); }); $(".close-a").click(function(){ $(".top_diagone_info ").animate({right:'0px'}); $(".top_diagone_info ").hide(); }); }); </script> <script> $(document).ready(function(){ if(window.location.href.match('123')){ //由注册页面跳转到登录页面，设置一个匹配的IP $(".container1").show(); $(".alert_bg").show(); } $(".container-login").click(function(){ $(".container1").show(); $(".alert_bg").show(); }); }); </script>
<body>处：
<!-- 弹出登录区域 start -->
<form id="frmV" action="" method="get" >
<div class="container_choosecar container1">
<div class="choosecar_title">
<div class="title_name">登录</div>
<div class="colse"></div>
</div>
<div class="place_content">
<div class="p-n-tent clearfix tel">
手机号：<input type="text" id="tel" value="" name="tel" placeholder="请输入手机号" />
<font color="red">*</font><br />
<span style="color:Red;font-size:12px"></span>
</div>
<div class="p-n-tent clearfix passwd">
密 码：<input type="password" id="passwd" name="passwd" placeholder="密码" />
<font color="red">*</font><br />
<span style="color:Red;font-size:12px"></span>
</div>
<div class="p-n-tent clearfix">
<input type="button" value="登录" class="btn btn-primary btn-login" style="120px;"/>
<span class="register"><a href="/CarServer/signup.jsp">没有帐号，请先注册</a></span>
</div>
</div>
</div>
<div class="alert_bg"></div>
</form>
<!-- 弹出登录区域 end -->
注册页面：
<body>处：
<form action="" method="get" id="signup">
<div class="register_box">
<div class="head">
<h5 >注册新用户</h5>
</div>
<div class="place_content">
<div class="p-n-tent clearfix tel">
手机号：<input type="text" id="tel" value="" name="tel" placeholder="请输入手机号" />
<font color="red">*</font><br />
<span style="color:Red;font-size:12px"></span>
</div>
<div class="p-n-tent clearfix email">
邮箱：<input type="text" id="email" value="" name="email" placeholder="请输入邮箱" />
<font color="red">*</font><br />
<span style="color:Red;font-size:12px"></span>
</div>
<div class="p-n-tent clearfix password">
登录密码：<input type="password" id="passwd" name="passwd" placeholder="请输入登录密码" />
<font color="red">*</font><br />
<span style="color:Red;font-size:12px"></span>
</div>
<div class="p-n-tent clearfix repasswd">
确定密码：<input type="password" id="repasswd" name="repasswd" placeholder="请再输入密码" />
<font color="red">*</font><br />
<span style="color:Red;font-size:12px"></span>
</div>
<div class="p-n-tent clearfix validate">
验证码：<input type="text" id="validate" name="validate" placeholder="请输入验证码" />
<font color="red">*</font><img src="image.jsp" id="Image1" style="height:32px;65px;margin-top:-8px;background:#FBA946" /> <a href="javascript:changeImg();" style="color:red; font-size:12px; text-decoration:none;">看不清，换一张</a><br />
<span style="color:Red;font-size:12px"></span>
</div>
<div class="p-n-tent clearfix">
<input type="button" value="注册" class="btn btn-primary btn-login" style="150px;margin-left:180px;"/>
<span class="register"><a href="/CarServer/?123">已有帐号，请登录</a></span>
</div>
</div>
</div>
</form>
<head>处：
<!-- signup --> <script type="text/javascript"> $(function() { $("#signup").validate( { /*自定义验证规则*/ rules: { tel:{ required: true, telnumber: true }, email:{ required: true, email: true }, passwd: { required: true, minlength: 7} }, /*错误提示位置*/ errorPlacement: function(error, element) { error.appendTo(element.siblings("span")); } } ); }); </script> <!-- end --> <script type="text/javascript"> /*验证码：“看不请，换一张”*/ function changeImg(){ document.getElementById("Image1").src="image.jsp?"+Math.random(); } </script>
image.jsp:
<%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*,java.io.*" pageEncoding="GB2312"%> <%! Color getRandColor(int fc,int bc){//给定范围获得随机颜色 Random random = new Random(); if(fc>255) fc=255; if(bc>255) bc=255; int r=fc+random.nextInt(bc-fc); int g=fc+random.nextInt(bc-fc); int b=fc+random.nextInt(bc-fc); return new Color(r,g,b); } %> <% //设置页面不缓存 response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cache"); response.setDateHeader("Expires", 0); // 在内存中创建图象 int width=60, height=20; BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); // 得到 输出流 OutputStream os=response.getOutputStream(); // 获取图形上下文 Graphics g = image.getGraphics(); //生成随机类 Random random = new Random(); // 设定背景色 g.setColor(getRandColor(200,250)); g.fillRect(0, 0, width, height); //设定字体 g.setFont(new Font("Times New Roman",Font.PLAIN,18)); //画边框 //g.setColor(new Color()); //g.drawRect(0,0,width-1,height-1); // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到 g.setColor(getRandColor(160,200)); for (int i=0;i<155;i++) { int x = random.nextInt(width); int y = random.nextInt(height); int xl = random.nextInt(12); int yl = random.nextInt(12); g.drawLine(x,y,x+xl,y+yl); } // 取随机产生的认证码(4位数字) String sRand=""; for (int i=0;i<4;i++){ String rand=String.valueOf(random.nextInt(10)); sRand+=rand; // 将认证码显示到图象中 g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));// 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成 g.drawString(rand,13*i+6,16); } // 将认证码存入SESSION session.setAttribute("rand",sRand); // 图象生效 g.dispose(); // 输出图象到页面 ImageIO.write(image, "JPEG", os); os.flush(); os.close(); os=null; response.flushBuffer(); out.clear(); out = pageContext.pushBody(); %>