java實現動態驗證碼原始碼——jsp頁面
阿新 • • 發佈：2019-01-03
我們通常在其他網站註冊或者登陸的時候會發現一個很高大上的驗證碼，那麼怎麼用java程式碼實現呢？下面我給大家貼一下我寫的方法：
此文章是寫的前臺jsp頁面的程式碼：
在這裡主要是使用的ajax的方法，當滑鼠離開輸入驗證碼的文字框時，進行驗證是否輸入正確！！<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <%@ taglib uri="/struts-tags" prefix="s" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <% String tag=request.getParameter("tag"); request.setAttribute("tag",tag); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <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="styles.css"> --> <link href="<%=basePath%>css/common.css" rel="stylesheet" type="text/css" /> <link href="<%=basePath%>css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ if(${tag == 'nologin'}){ alert("對不起，您還沒有登入,請先進行登入"); } }); </script> <script type="text/javascript" > $(function(){ //註冊 $("#register").click(function(){ location.href="register.jsp"; }); //驗證碼 $("#changeCode").click(function(event){ $("#validateCode").attr("src","Number.jsp?ran"+Math.random()); event.preventDefault(); return false; }); //判斷驗證碼輸入是否正確 $("#passwords").blur(function(){ $.post( "doNumrand.jsp", "inputCode="+$("#passwords").val(), function(result){ if($.trim(result)=="true"){ $("#cl").html("<span style='color:green'>驗證碼正確</span>"); }else{ $("#cl").html("<span style='color:red'>驗證碼錯誤</span>"); } } ); }); }); </script> <script type="text/javascript"> <% String msg = request.getParameter("msg"); if("registerSuccess".equals(msg)){ out.print("alert('註冊成功，系統將自動跳轉登入頁');"); } if("loginError".equals(msg)){ out.print("alert('使用者名稱密碼錯誤，請重新登入');"); } if("validateCodeError".equals(msg)){ out.print("alert('驗證碼錯誤，請重新輸入');"); } %> </script> </head> <body> <div class="wrap"> <!-- main begin--> <div class="main"> <div class="sidebar"> <p><img src="images/img1.jpg" width="443" height="314" alt="" /></p> </div> <div class="sidebarg"> <form action="login.action" method="post"> <div class="login"> <span style="color:red"><s:property value="msg"/></span> <dl> <dt class="blues">使用者登陸</dt> <dd><label for="name">使用者名稱：</label> <input type="text" name="auctionuser.username" class="inputh" value="${username}" id="name"/></dd> <dd><label for="password">密 碼：</label> <input type="password" name="auctionuser.userpassword" class="inputh" value="${userpassword}" id="password"/></dd> <dd> <label class="lf" for="passwords">驗證碼：</label> <input type="text" name="inputCode" class="inputh inputs lf" value="" id="passwords"/> <span class="wordp lf"><img id="validateCode" src="Number.jsp" width="96" height="27" alt="" /></span> <span class="blues lf"><a id="changeCode" href="javascript:void(0);" title="">看不清</a> <a id="cl"></a></span> </dd> <dd> <input name="" type="checkbox" id="rem_u" /> <span class="rem_u">下次自動登入</span> </dd> <dd class="buttom"> <input name="" type="submit" value="登 錄" class="spbg buttombg f14 lf" /> <input id="register" name="" type="button" value="注 冊" class="spbg buttombg f14 lf" /> <span class="blues lf"><a href="" title="">忘記密碼?</a></span> <div class="cl"></div> </dd> </dl> </div> </form> </div> <div class="cl"></div> </div> <!-- main end--> <!-- footer begin--> </div> <!--footer end--> </body> </html>