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

先上代码

<%@ 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

<%@ 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