验证码验证问题

使用的Kaptcha验证码和老师视频展示的不一样。

1 使用Servlet 获得不到jsp输入的code以及name的值，无法进行比对。可以获得kcode的值但是code一直为null，我觉得应该是使用js的判断还没有把form表单提交至后台，所以获取不到？

2 无论checkVerificationCode()返回的是true 还是false 都会进行提交表单，成功登陆，这是哪里错了

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录</title>
<link rel="stylesheet" href="${basePath}/css/login.css">
<script src="sourse/jquery-3.3.1.js"></script>
<script type="text/javascript">
function changeImg() {
var img = document.getElementById("img");
img.src = "kaptcha.jpg?" + new Date();
}
function checkVerificationCode() {
$.post("http://localhost:8080/messageboard_war_exploded/checkCode",function (data){
if(data==1){
return true
}else {
alert('验证码输入错误');
return false
}
});
}

function getCookie(cookie_name) {
var allCookies = document.cookie;
var cookie_pos = allCookies.indexOf(cookie_name); //如果找到了索引，就代表cookie存在
if (cookie_pos != -1) {
cookie_pos += cookie_name.length + 1;
var cookie_end = allCookies.indexOf(";", cookie_pos);
if (cookie_end == -1) {
cookie_end = allCookies.length;
}
return unescape(allCookies.substring(cookie_pos, cookie_end));
}
return null;
}
</script>
</head>
<body>
<div class="login">
<div class="header">
<h1>
<a href="/login.do">登录</a>
<a href="/regPrompt.do">注册</a>
</h1>
<button></button>
</div>
<form action="${basePath}/main.do" method="post">
<div class="name">
<input type="text" id="name" name="username" placeholder="请输入登录用户名">
<p></p>
</div>
<div class="pwd">
<input type="password" id="pwd" name="password" placeholder="6-16位密码，区分大小写，不能用空格">
<p></p>
</div>
<div class="idcode">
<input type="text" id="verificationCode" name="TCode" placeholder="请输入验证码">
<a href='#' onclick="javascript:changeImg()">    换一张</a>
<span><img id="img" width="100" src="kaptcha.jpg"/></span>
<div class="clear"></div>
</div>
<div class="autoLogin">
<label for="">
<input type="checkbox" checked="checked">
下次自动登录
</label>
<a href="">忘记密码</a>
</div>
<div class="btn-red">
<input onclick="return checkVerificationCode();" type="submit" value="登录" id="login-btn">
</div>
</form>
</div>
</body>
</html>

package messageboraddemo.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class checkCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String code = request.getParameter("TCode");
String kcode = (String) request.getSession().getAttribute("kcode");
PrintWriter out = response.getWriter();
if(null !=code && null != kcode && code.equalsIgnoreCase(kcode)){
out.print(1);
}else {
out.print(2);
}
out.flush();
out.close();
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}

没有报错信息，就是获取不到输入的验证码，和返回无论什么都可以成功登陆

谢谢老师

慕斯4002519 2019-02-25

源自：项目：留言板 6-3 作业题

收起

2回答

chrismorgen 回答被采纳获得+3积分 2019-02-27 10:04:26

你好同学，如果不想刷新页面就需要在前台处理验证码，如果你在后台处理验证码的在转发到前台页面，肯定会刷新当前页面的，你可以在jsp页面中使用js代码来写，可以参考如下代码来完成哦，祝学习愉快~

100

101

102

103

104

105

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
   <head>
      <title>注册</title>
      <link rel="stylesheet" href="../../../css/reg.css">
 
      <script type="text/javascript">
 
         function check() {
            return checkUser() && checkPwd() && checkVerificationCode();
            }
 
         function checkUser() {
            var username = document.getElementById("name");
            if("" === username.value){
                    alert('用户名不能为空');
                    return false;
            }
            return true;
            }
 
         function checkPwd() {
            var pwd = document.getElementById("pwd");
            var confirmPwd = document.getElementById("confirmPwd");
            var flag = (pwd.value === confirmPwd.value);
            if ("" === pwd.value){
                alert('密码不能为空');
                flag = false;
            }else if (!flag) {
                alert('确认密码错误');
            }
            return flag;
            }
 
         function changeImg() {
                var img = document.getElementById("img");
                img.src = "/verificationCode.do?date=" + new Date();
            }
 
            function checkVerificationCode() {
                var verificationCode = document.getElementById('verificationCode').value;
                var flag = (getCookie('v_c_v') === verificationCode.toLowerCase());
                if (!flag) {
                    alert('验证码输入错误');
                }
                return flag;
            }
 
            function getCookie(cookie_name) {
                var allCookies = document.cookie;
                var cookie_pos = allCookies.indexOf(cookie_name);   //如果找到了索引，就代表cookie存在
                if (cookie_pos != -1) {
                    cookie_pos += cookie_name.length + 1;
                    var cookie_end = allCookies.indexOf(";", cookie_pos);
                    if (cookie_end == -1) {
                        cookie_end = allCookies.length;
                    }
                    return unescape(allCookies.substring(cookie_pos, cookie_end));
                }
                return null;
            }
      </script>
   </head>
   <body>
      <div class="reg">
         <div class="header">
            <h1>
               <a href="/login.do">登录</a>
               <a href="/regPrompt.do">注册</a>
            </h1>
            <button></button>
         </div>
         <form action="/register.do" method="post">
            <div class="name">
               <input type="text" id="name" name="username" placeholder="请输入用户名">
               <p></p>
            </div>
            <div class="pwd">
               <input type="password" id="pwd" name="password" placeholder="6-16位密码，区分大小写，不能用空格">
               <p></p>
            </div>
            <div class="pwd">
               <input type="password" id="confirmPwd" name="confirmPwd" placeholder="确认密码">
               <p></p>
            </div>
            <div class="idcode">
               <input type="text" id="verificationCode" placeholder="请输入验证码">
               <a href='#' onclick="javascript:changeImg()">&nbsp;&nbsp;&nbsp;&nbsp;换一张</a>
               <span><img id="img" src="/verificationCode.do"/></span>
               <div class="clear"></div>
            </div>
            <div class="btn-red">
               <input onclick="return check();" type="submit" value="注册" id="reg-btn">
            </div>
         </form>
         <%
            if(request.getAttribute("msg")!=null){
         %>
         <b>${msg}</b>
         <%
            }
         %>
      </div>
   </body>
</html>

收起回答

慕斯4002519 提问者 #1

嗯嗯，谢谢老师，但是使用Kaptcha验证码的话，是不是只能在后台获得其验证码？

2019-02-27 10:22:21
chrismorgen 回复提问者慕斯4002519 #2

你好同学，是这样的，祝学习愉快~

2019-02-27 14:55:19

好帮手慕阿莹 2019-02-25 20:43:47

1、同学没有传参数过去，可以像这样获取一下参数，并且传递到Servlet中，如下图红框部分所示：

2、这个function(data)中的返回值是异步的，返回值是没有办法赋值给checkVerificationCode()函数的，所以，checkVerificationCode() 没有返回值，所以<input onclick="return checkVerificationCode();" type="submit">是都可以提交的。

关于验证码，同学可以直接在Servlet中验证

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

提问者慕斯4002519 #1

老师好，已经解决了将输入的值传到Servlet，异步的意思是指在post里无论什么操作都不会改变外面的值嘛？ function checkVerificationCode() { var code = $("#verificationCode").val(); var params = { "code":code }; var flag = false; $.post("http://localhost:8080/messageboard_war_exploded/checkCode",params,function (data){ if(data==1){ flag = true; }else { alert('验证码输入错误'); } }); return flag; } 进行了这样的修改也是不行，应该是没有修改flag的值。我在Servlet进行了验证，如何传回来呢，如果不用现在的这种方法，用form提交到Servlet在传回来，这样整体页面就刷新了。该如何既验证了验证码，给出相应提示，然后又不刷新呢。

2019-02-26 13:35:38
我会看星星回复提问者慕斯4002519 #2

看看这个验证码：https://www.cnblogs.com/nanyangke-cjz/p/7049281.html

2019-02-26 19:35:22
提问者慕斯4002519 回复我会看星星 #3

你好，博客中写到验证之后就是直接输出验证失败或者成功，而我的需要一个值回来，来确定是否提交表单。如果全都放到后端，那么如果失败就会刷新整个jsp。我想的是输入错误，提示错误，并不刷新整个界面。就和老师视频中那样的。感谢(❁´ω`❁)

2019-02-26 20:38:30