关于验证码

通过alert方法，发现这里的问题首先在于，kcode一直是最初显示的那个验证码，不会随着刷新而接收到刷新后的新的验证码的值。

第二个问题是，输入的验证码和kcode验证码不一致，但每次还是能成功登陆，这是为什么？

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<%--均可，均不必，因为已经在外部写了common.jsp--%>
<%--<base href="<%=basePath%>">--%>
<%--<base href="${basepath}">--%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<title>登录页面</title>
<style type="text/css">
   .code 
   {
    font-family:Arial;
    font-style:normal;
    color:blue;
    font-size:20px;
    border:0;
    padding:2px 3px;
    letter-spacing:3px;
    font-weight:bolder;
    float:left;
    cursor:pointer;
    width:40px;
    height:20px;
    line-height:20px;
    text-align:center;
    vertical-align:middle;
   }
   a 
   {
    text-decoration:none;
    font-size:12px;
    color:#288bc4;
   }
   a:hover 
   {
    text-decoration:underline;
   }
</style>
</head>
<body >
<%
   String msg = "";
   if(request.getAttribute("msg")!=null){
      msg = (String)request.getAttribute("msg");
   }
%>
   <center>
      <h1>用户登录</h1>
      <h3><font color="red"><%=msg%></font></h3>
      <form action="<%=basePath%>/loginServlet" method="post"
           onsubmit="return validateCode()">
         <table width="300px" cellspacing="0px" cellpadding="0px" border="1px">
            <tr>
               <td>用户名</td>
               <td colspan="2">
                  <input type="text" name="username" pattern="[a-zA-Z_0-9]{3,12}"
                        required="required" placeholder="用户名为3-12位字母数字或下划线组合">
               </td>
            </tr>
            <tr>
               <td>密&nbsp;码</td>
               <td  colspan="2">
                  <input type="password" name="password" pattern="[a-zA-Z_0-9]{5,12}"
                        required="required" placeholder="长度为5-12位字母数字或下划线组合" >
               </td>
            </tr>
            <tr>
               <td>验证码</td>
               <td style="border-right-style:none; width: 150px">
                  <input type="text" name="checkCode" pattern="[a-zA-Z0-9]{4}"
                        required="required" placeholder="请输入验证码" id="inputCode">
               </td>
               <td style="border-left-style:none;">
                  <div class="code">
                     <img id="changeCode" src="http://localhost:8080/mook_course/kaptcha.jpg" />
                  </div>
               </td>
            </tr>
            <tr>
               <td colspan="3" style="text-align:center">
                  <input type="submit" value="登录">
                  <input type="reset" value="取消">
               </td>
            </tr>
         </table>
      </form>
   </center>
   <script src="js/jquery-3.3.1.min.js"></script>
   <script>
      $(function(){
         $("#changeCode").on("click",function(){
            $(this).attr("src","http://localhost:8080/mook_course/kaptcha.jpg?d="+new Date().getTime());
         });
      })
   </script>
 
   <%--检验验证码--%>
   <script type="text/javascript">
      function validateCode(){
         var inputCode = document.getElementById("inputCode").value.toLowerCase();
         var kcode = "<%=session.getAttribute("kcode")%>".toLowerCase();
 
         alert(inputCode);
         alert(kcode);
 
         if(inputCode.equals(kcode)){
            return true;
         }else{
            alert("验证码输入有误！");
            document.getElementById("inputCode").value="";
            return false;
         }
      }
   </script>
</body>
</html>

慕数据7156690 2019-03-23

源自：项目：商品展示及购物车 5-3 作业题

收起

2回答

好帮手慕阿满回答被采纳获得+3积分 2019-03-24 15:54:29

同学你好，实验同学的代码，可以刷新验证码。如下代码处：

kcode获取为null，问一下同学session中有kcode吗？

另外js中没有equals方法，这里同学可以使用==比较即可。

祝：学习愉快~

收起回答

提问者慕数据7156690 2019-03-24 16:55:33

web.xml里配置了的，把kcode放进session

老师再试我的代码的时候，启动tomcat后，不关闭tomcat而是同步一下，然后重新进入登陆页面，就能发现能接收到验证码kcode。

但这时候还是跟之前一样，刷新验证码后并不能接收到新的kcode，而一直是原本的kcode。

就像下面这样，图一alert的是我输入的值，图二alert的是session中存的kcode

收起回答

好帮手慕阿满 #1

同学你好，按照同学的配置的试了下，发现session中存放的kcode的值是不变的，所以不能使用在web.xml中配置kcode的方式校验输入的验证码是否正确。祝：学习愉快~

2019-03-25 10:58:36
提问者慕数据7156690 回复好帮手慕阿满 #2

不能吗？可是老师课上不就是这么讲的吗

2019-03-25 11:37:10
好帮手慕阿满回复提问者慕数据7156690 #3

抱歉同学，可以在web.xml中配置kcode，但是在index.jsp获取kcode值时，不能获取刷新后的值，所以不建议使用这种方式。可以将输入的用户名、密码、验证码等信息提交，在LoginServlet中获取提交过来的信息，以及使用String kcode= (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);这种方式获取实时的验证码的值。再对验证码进行校验。祝：学习愉快~

2019-03-25 18:34:38