onsubmit="return validateCode()"

登录页面里

1	`<form` `action="<%=basePath%>/LoginServlet" method="post" onsubmit="return validateCode()">`

onsubmit="return validateCode()"这个是做什么用的?

还有验证码的逻辑应该怎么写呢?知道参考那个kaptcha插件,但里面方法只是当页返回验证码正确或不对.

这个逻辑应该怎么写?完全不知道,请老师贴一下,相应的servlet代码提供给我参考一下,谢谢!

龍彦宏 2019-02-22

源自：Java Web基础综合案例 5-3 作业题

收起

1回答

chrismorgen 2019-02-22 18:50:25

你这个代码写的是正确的，在当前作业中，验证码的验证是通过js来是实现的，实现的代码如下：

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>

LoginServlet中的代码如下，祝学习愉快~

package cn.java.servlet;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 
import cn.java.service.CourseService;
import cn.java.service.impl.CourseServiceImpl;
 
/**
 * 用户登录
 * 
 * @author dingP
 *
 */
@SuppressWarnings("serial")
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
    private CourseService cs = new CourseServiceImpl();
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 1、获取用户名与密码参数
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 2、调用用户登录业务方法
        int flag = cs.login(username, password);
        // 3、登录成功则跳转到后台管理页面，否则跳回到原来页面
        if (flag >= 1) {// 登录成功
            HttpSession session = request.getSession();
            session.setAttribute("flag", flag);
            session.setAttribute("username", username);
            response.sendRedirect("" + request.getContextPath() + "/pages/admin/server.jsp");
        } else {// 登录失败
            response.sendRedirect("" + request.getContextPath() + "/index.jsp");
        }
    }
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
 
}