表单提交之前如何校验验证码

先上代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String basePath = request.getScheme() + ":" + "//" + request.getServerName() + ":" + request.getServerPort()
            + request.getServletContext().getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录页面</title>
<style type="text/css">
.code {
    cursor: pointer;
}
 
a {
    text-decoration: none;
    font-size: 12px;
    color: #288bc4;
}
 
a:hover {
    text-decoration: underline;
}
</style>
<script>
    //刷新验证码
    function changeCode() {
        document.getElementById("code").src = "http://localhost:8080/class_management/kaptcha.jpg?d=" + new Date().getTime();
    }
    //校验验证码
    function validateCode(){
 
    }
</script>
</head>
<body">
    <center>
        <h1>用户登录</h1>
        <form action="<%=basePath%>/LoginServlet" method="post" onsubmit="return validateCode()">
            <table width="400px" height="200px" cellspacing="0px" cellpadding="0px" border="1px">
                <tr>
                    <td>用户名</td>
                    <td colspan="2">
                        <input type="text" name="username" placeholder="用户名为3-12位字母数字或下划线组合"
                                pattern="[a-zA-Z_0-9]{3,12}" required="required" >
                    </td>
                </tr>
                <tr>
                    <td>密&nbsp;码</td>
                    <td colspan="2">
                        <input type="password" name="password" placeholder="长度为5-12位字母数字或下划线组合" 
                                pattern="[a-zA-Z_0-9]{5,12}" required="required">
                    </td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td style="border-right-style: none;">
                        <input type="text" name="checkCode" placeholder="请输入验证码" id="inputCode">
                    </td>
                    <td style="border-left-style: none;">
                        <div class="code" id="checkCode">
                            <img src="http://localhost:8080/class_management/kaptcha.jpg" id="code" onclick="changeCode()" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="text-align: center">
                    <input type="submit" value="登录"> <input type="reset" value="取消">
                    </td>
                </tr>
            </table>
        </form>
    </center>
</body>
</html>

我的想法是在js脚本中用validateCode()的返回值来校验验证码是否正确。可是校验验证码得用java代码来写啊，如下图所示。

Java代码  收藏代码
//从session中取出servlet生成的验证码text值
String kaptchaExpected = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
//获取用户页面输入的验证码
String kaptchaReceived = request.getParameter("kaptcha");
//校验验证码是否正确
if (kaptchaReceived == null || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected)){
    setError("kaptcha", "Invalid validation code.");
}

我不可能在js脚本中写java代码啊？请问老师这个该怎么实现呢？

慕数据4154996 2018-09-02

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

收起

1回答

一叶知秋519 2018-09-03 11:09:09

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录页面</title>
<style type="text/css">
    .code 
    {
     background:url(code_bg.jpg);
     font-family:Arial;
     font-style:italic;
     color:blue;
     font-size:20px;
     border:0;
     padding:2px 3px;
     letter-spacing:3px;
     font-weight:bolder;
     float:left;
     cursor:pointer;
     width:40x;
     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>
<script type="text/javascript">
    var code;
    function createCode() 
    {
     code = "";
     var codeLength = 4; //验证码的长度
     var checkCode = document.getElementById("checkCode");
     var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 
          'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
          'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
     for(var i = 0; i < codeLength; i++) 
     {
      var charNum = Math.floor(Math.random() * 52);
      code += codeChars[charNum];
     }
     if(checkCode) 
     {
      checkCode.className = "code";
      checkCode.innerHTML = code;
     }
    }
    function validateCode() 
    {
     var inputCode=document.getElementById("inputCode").value;
     if(inputCode.length <= 0) 
     {
      alert("请输入验证码！");
      return false;
     }
     else if(inputCode.toUpperCase() != code.toUpperCase()) 
     {
       alert("验证码输入有误！");
       createCode();
       return false;
     }
     else 
     {
      //alert("验证码正确！");
      return true;
     }    
    }  
</script>
</head>
<body onload="createCode()">
    <center>
        <h1>用户登录</h1>
        <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" placeholder="用户名为3-12位字母数字或下划线组合" pattern="\w{3,12}" required="required"></td>
                </tr>
                <tr>
                    <td>密&nbsp;码</td>
                    <td  colspan="2"><input type="password" name="password" placeholder="长度为5-12位字母数字或下划线组合" pattern="\w{5,12}" required="required"></td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td style="border-right-style:none;">
                        <input type="text" name="checkCode" placeholder="请输入验证码" id="inputCode">
                    </td>
                    <td style="border-left-style:none;"><div class="code" id="checkCode" onclick="createCode()" ></div></td>
                </tr>
                <tr>
                    <td colspan="3" style="text-align:center">
                        <input type="submit" value="登录">
                        <input type="reset" value="取消">
                    </td>
                </tr>
            </table>
        </form>
    </center>
</body>
</html>

同学可以参考上面代码尝试完成一下~

祝学习愉快！

收起回答

提问者慕数据4154996 #1

那用kaptcha是不是一定得提交到后台才能验证呢？

2018-09-04 20:58:53
慕布斯37364 回复提问者慕数据4154996 #2

https://blog.csdn.net/abc19900828/article/details/40895201 你可以看看这个博客，他好像是在前台界面写的代码进行验证的。

2018-09-05 10:11:15